paper-dialog on iOS

John Brosan

unread,

Feb 15, 2016, 9:34:09 AM2/15/16

to Polymer

Hello everyone,

I am working on a component, and need to invoke a paper-dialog from this custom element. The paper-dialog seems to work on on regular PC/Mac Chrome/Safari. However, when I test on iOS9 (iPhone 6s) the dialog seems to appear "under" the header of the Polymer Starter Kit. Again, this does not happen on Chrome/Safari for PC/Mac. Does anyone have suggestions, or links on how to resolve this?

Thanks,

John

tania...@gmail.com

unread,

Feb 29, 2016, 4:07:57 AM2/29/16

to Polymer

I am having exactly the same issue and dont know how to fix it... Did you find any solution for this? Thanks!

Jim Trainor

unread,

Feb 29, 2016, 1:48:27 PM2/29/16

to Polymer

+1

Experiencing the same issue. Safari/iOS only. Also has the effect of making it impossible to dismiss a modal dialog. No choice but to refresh the page.

Taylor Savage

unread,

Feb 29, 2016, 6:25:22 PM2/29/16

to Jim Trainor, Valdrin Koshi, Polymer

+Valdrin

Do you happen to have a simplified repro of this, and would you mind filing an issue?

Thanks,

Taylor

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/acdf0316-b73d-4a74-96d3-cabeb8efcb6f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

val...@google.com

unread,

Feb 29, 2016, 6:33:23 PM2/29/16

to Polymer

Hi John,

I suspect you're declaring the dialog inside an element that creates its own stacking context, and since you see the issue on ios only, I bet your dialog is inside an element that sets -webkit-overflow-scrolling: touch https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling (which creates a new stacking context)

This is a known limitation of overlays (see doc https://elements.polymer-project.org/elements/iron-overlay-behavior), and until we come with a better solution (or the platform provides a way to overcome these stacking context issues), the suggestion is to add overlays to body wherever possible, or to take care of the stacking context.

Hope this helps,

Valdrin

tania...@gmail.com

unread,

Mar 1, 2016, 6:44:03 AM3/1/16

to Polymer, jim.train...@gmail.com, val...@google.com

I have set http://v5.irekia.efaber.net/mobile/test with a minimal setup so you can check it out...

Also I have described the issue in StackOverflow http://stackoverflow.com/questions/35703901/polymer-paper-dialog-on-ios/35708096

Please tell me if I should fill in an issue in github, I wasn't very sure as maybe I am making some terrible mistake.

Thanks!

Jim Trainor

unread,

Mar 2, 2016, 2:58:47 PM3/2/16

to Polymer

I moved my dialog element to the <body> and that resolved my instance of the issue on iOS. Thanks

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7a11ca34-ac68-4e27-8869-7249b01b93b5%40googlegroups.com.

Reply all

Reply to author

Forward