Notification stuck at the bottom if it pops up when the window is not visible.

[don1989]

If you get a notification in your web app, and the tab of the app is not visible or active during the time it appeared... when you return into your app, the notification will appear stuck at the bottom of the screen.

Steps to reproduce:

1. Paste the code below somewhere in your startup function.
2. Start your app and ensure the page of your app is not visible, by either having the window minimised or on a different tab.
3. When sufficient time has elapsed (15 seconds or so), maximise your app again.
4. Notice that the notification that popped up is still present, however it's mostly cut off from view and wont disappear.

                 setTimeout( ()=>{
            store.addNotification({
                title: 'hello',
                message: 'there',
                type: "success",
                insert: "bottom",
                container: "bottom-right",
                animationIn: ["animated", "fadeIn"],
                animationOut: ["animated", "fadeOut"],
                dismiss: {
                    duration: 5000,
                    onScreen: true,
                    showIcon: true
                }
            })
        }, 5000)

[stuckinaboot]

Was this ever fixed?

[don1989]

Was this ever fixed?

Not yet

[stuckinaboot]

Was this ever fixed?

Not yet

Have you found a workaround? Or is there an alternative library you'd suggest? This library is so easy to use that I've been a bit hesitant to switch

[don1989]

Was this ever fixed?

Not yet

Have you found a workaround? Or is there an alternative library you'd suggest? This library is so easy to use that I've been a bit hesitant to switch

I agree. I haven't found a workaround yet as it's low on our priority list atm.

[teodosii]

I'm looking to fix this, could you please post a gif for this to reproduce? Thank you!

[teodosii]

@stuckinaboot @don1989

[stuckinaboot]

@teodosii good to hear! I haven't been able to consistently reproduce but repeating the steps @don1989 listed a number of times should result in the issue occurring.

[don1989]

It's not happening 100% so it's difficult to create a gif while reproducing the issue. But here is a gif of the actual issue happening.

[don1989]

Not sure if it helps @teodosii

When this issue is happening - looking in the dev console at the "notification-parent" element, the height of the element is set to '0px', but it remains visible.

If I manually set the height to 0% in the console, it seems to make the issue disappear. Also if I set overflow to 'hidden', it also makes it disappear. (similar to some issues discussed here: https://stackoverflow.com/questions/950829/div-height0px-does-not-work).

This might just be some kind of refresh of the DOM that is making it go away, but maybe setting the height to 0px isn't enough when the transition is over?

[teodosii]

Hmm, are you sure you see only height: 0px? Should have overflox: hidden as well, otherwise the height: 0px doesn't work. I'll have a closer look on that, I'll be publishing the following days a new version and hopefully will have this fixed. From what I've seen, it doesn't position notifications properly when window is not visible, like there is a gap between them sometimes (in like 1 out of 3 tries)

[don1989]

Here's a screenshot of the element if it helps.

[teodosii]

Should be fixed in 3.0.0 as I wasn't able to reproduce it anymore. Feel free to reopen it if this is still happening.