Deion The paper-toast eleme

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Hope this helps: <div class="highlight highlight-text-html-basic notranslate posit

The `paper-toast` element is hidden from drawer content on iPad with Safari about paper-toast HOT 4 CLOSED

polymerelements commented on July 19, 2024

The `paper-toast` element is hidden from drawer content on iPad with Safari

from paper-toast.

Comments (4)

valdrinkoshi commented on July 19, 2024

Hi @WTober,
This is caused by the way stacking contexts work, and is a known limitation of iron-overlay-behavior.
It affects all overlays, e.g. see this other issue reported on paper-dialog, in particular this comment provides more details about the cause. To work around this issue, the user is required to place overlays in a stacking-context safe node (e.g. document.body).

from paper-toast.

WTober commented on July 19, 2024

To work around this issue, the user is required to place overlays in a stacking-context safe node (e.g. document.body).

Ok, at the moment I have no idea how I place overlays in a stacking-context safe node, but I try to find out.

from paper-toast.

valdrinkoshi commented on July 19, 2024

Hope this helps:

<body>
  <!-- this toast is in the stacking context of body -->
  <paper-toast></paper-toast>

  <!-- this div creates its own stacking context --> 
  <div style="transform: translateZ(0)">
    <!-- this toast is in the stacking context of the div it is contained -->
    <paper-toast></paper-toast>
  </div>
</body>

from paper-toast.

valdrinkoshi commented on July 19, 2024

Closing this, as it seems like a mis-use of paper-toast, will re-open if I'm mistaken :)
@WTober from the video you shared I cannot see the error reproduced, also the 2nd link is a 404 not found. If the problem persists, could you share a jsbin? here an example http://jsbin.com/xequvap/1/edit?html,output

from paper-toast.

Recommend Projects