iron-overlay-behavior
iron-overlay-behavior copied to clipboard
PolymerElements
iron-overlay-backdrop failing in FullScreen mode set with Element.requestFullscreen()
Description
When browser is set to full screen mode by JavaScript code using Element.requestFullscreen(),
iron-overlay-behavior incorrectly calculates z-index value for <iron-overlay-backdrop>
NOTE:
the full screen mode invoked by pressing F11 works fine.
Expected outcome
overlay and backdrop to show in full screen mode
Actual outcome
backdrop is not showing, because it's z-index is wrong
Browsers Affected
- [x] Chrome
- [x] Firefox
- [x] IE 11
other not tested.
Additional info
<simple-overlay> with iron-backdrop-behavior must be placed inside the wrapping element used by Element.requestFullscreen() placing it in <body> will cause it not to show at all.
<iron-overlay-backdrop> is inserted by behavior outside of this element with wrong z-index value.
Using <body> as wrapping element is not reliable to use with Element.requestFullscreen()
Hi @alfalabs, can you please provide a jsbin example showing the issue?
I described the issue in detail above. There are many dependencies, I am not familiar with jsbin setup. Can you make a link to an environment in jsbin with setup for iron-behaviour-overlay, please.
<body>
<div id="wrapper-for-fullscreen">
<!-- content to set full screen -->
<simple-overlay id="popup" with-backdrop>
<span>this is a popup</span>
</simple-overlay>
</div>
</body>
<script>
var elem = document.querySelector("#wrapper-for-fullscreen");
elem.requestFullscreen();
</script>
Hi @alfalabs, here the jsbin http://jsbin.com/vovene/1/edit?html,output
I've provided a temporary solution to your problem, that is reparent the backdrop before entering in full screen mode.
By default, overlays will add the backdrop element for you into body. Ideally the user should be able to say "I provide the backdrop element, no need to create one". Maybe provide a setter for backdropElement, so that you could create your own and assign it to your overlay.