I show a paper-toast after opening a link via window.open (It's meant as feedback, in case a popup blocker prevents the new page to open). If I browse the newly opened page for a while and then return to the polymer app, the toast is already closed, as intended, but still provides an invisible block that prevents me from clicking other elements at the bottom of my app. This issue does not appear if I go back to the app before the toast closes and see it closing.
The issue seems to be limited to Chrome. I also tested with Firefox and Edge, who both handled the closing as intended. In Chrome, the toast is styled as follows after being closed:
If I jump back to the app before the toast closes, it looks like this:
<paper-toast id="popup-toast" class="toast" style="outline: none; position: fixed; box-sizing: border-box; left: 109.797px; top: 784.922px; max-width: 854.391px; max-height: 49px; display: none;" aria-hidden="true"></paper-toast>
In Edge it looks the same, no matter if I jump back in time or not. In Firefox it looks slightly different but is still working as intended:
<paper-toast id="popup-toast" class="toast" style="outline: currentcolor none medium; position: fixed; box-sizing: border-box; left: 310px; top: 289.2px; max-width: 1039.8px; max-height: 49px; display: none;" aria-hidden="true"></paper-toast>
The difference seems to be that display: none is not set in Chrome and thus the toast remains as invisible barrier.
I'm using Chrome Version 74.0.3729.157 in Windows 10 and the paper-toast in version 3.0.1
Expected outcome
The elements at the bottom of the app are accessible while the toast is closed.
Actual outcome
The bottom elements cannot be clicked due to the invisible paper-toast
Steps to reproduce
Open a paper-toast immediately after switching to a new tab via window.open
Wait a bit until the toast close
Switch back to the tab with the polymer app
Try to access the elements at the bottom of the app
Description
I show a paper-toast after opening a link via window.open (It's meant as feedback, in case a popup blocker prevents the new page to open). If I browse the newly opened page for a while and then return to the polymer app, the toast is already closed, as intended, but still provides an invisible block that prevents me from clicking other elements at the bottom of my app. This issue does not appear if I go back to the app before the toast closes and see it closing.
The issue seems to be limited to Chrome. I also tested with Firefox and Edge, who both handled the closing as intended. In Chrome, the toast is styled as follows after being closed:
<paper-toast id="popup-toast" class="toast" style="outline: none; position: fixed; box-sizing: border-box; left: 109.797px; top: 784.922px; max-width: 854.391px; max-height: 49px; z-index: 105;" aria-hidden="true"></paper-toast>If I jump back to the app before the toast closes, it looks like this:
<paper-toast id="popup-toast" class="toast" style="outline: none; position: fixed; box-sizing: border-box; left: 109.797px; top: 784.922px; max-width: 854.391px; max-height: 49px; display: none;" aria-hidden="true"></paper-toast>In Edge it looks the same, no matter if I jump back in time or not. In Firefox it looks slightly different but is still working as intended:
<paper-toast id="popup-toast" class="toast" style="outline: currentcolor none medium; position: fixed; box-sizing: border-box; left: 310px; top: 289.2px; max-width: 1039.8px; max-height: 49px; display: none;" aria-hidden="true"></paper-toast>The difference seems to be that display: none is not set in Chrome and thus the toast remains as invisible barrier.
I'm using Chrome Version 74.0.3729.157 in Windows 10 and the paper-toast in version 3.0.1
Expected outcome
The elements at the bottom of the app are accessible while the toast is closed.
Actual outcome
The bottom elements cannot be clicked due to the invisible paper-toast
Steps to reproduce
Browsers Affected