Initialised (but not visible) toast overlaps page content (preventing clicks on page)

Created by: KjelleJ

A Bootstrap toast is not closed (using the close button) before the app is "finished" (reloaded or at browser exit). When the app is started again the buttons under the "invisible toast" cannot be used although they are visible. So it looks like the toast "stays on top" but is invisible.

The solution to the problem is to click the button that shows the toast and close the toast. Now all buttons are clickable.

Bootstrap 4.3.1. Windows 10 Home v1809. Chrome Version 74.0.3729.131.

To see a demo of this problem goto tutorialrepublic and adjust the window size so part of the buttons are under the toast. Press 'Show Toast', reload the page and if you hoover the cursor you can see where the toast was located (arrow instead of hand). See also stackoverflow