2

I am having a weird issue with Polymer paper-dialog on Safari iOS, working nice on desktop. The overlay seems to be under the backdrop element so the overlay is not accessible. I have been reading this question paper-dialog in Polymer doesn't close in iPhone and the proposed solution doesn't work for me.

The thing is that when I try the dialog in the polymer-project element page it works on iOS but my implementation doesn't, but I can't find any differences between my implementation and the provided demo https://elements.polymer-project.org/elements/paper-dialog?view=demo:demo/index.html&active=paper-dialog

I have put my page in an accesible url so you can try it

http://v5.irekia.efaber.net/mobile/test

If I try it from my Safari desktop it works fine, but in my iPhone the backdrop element is over the overlay

overlay in iPhone fails Could someone help me? Am I missing something?

Community
  • 1
  • 1
Tania R
  • 499
  • 4
  • 11
  • It is currently still an [issue](https://github.com/PolymerElements/iron-overlay-behavior/pull/155) with the iron-overlay-behavior and stacking context. In the meantime, you can try to apply this [patch](http://stackoverflow.com/a/31510980/1015489) to all of your dialogs. – moerion Aug 16 '16 at 20:20

2 Answers2

0

Try bumping the the z-index of your paper-dialog to 105. The <iron-overlay-backdrop> element has some limitations:

The element is styled to appear on top of other content by setting its z-index property. You must ensure no element has a stacking context with a higher z-index than its parent stacking context. You should place this element as a child of whenever possible.

Source: https://github.com/PolymerElements/iron-overlay-behavior

ob1
  • 1,792
  • 15
  • 20
-1

Polymer is not fully supported on some browser yet. Try to update the webcomponents.js or update the paper-dialog component.

user3449772
  • 749
  • 1
  • 14
  • 27