Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

iron-overlay-backdrop failing in FullScreen mode set with Element.requestFullscreen() #152

Open
3 tasks done
alfalabs opened this issue Apr 9, 2016 · 4 comments
Open
3 tasks done

iron-overlay-backdrop failing in FullScreen mode set with Element.requestFullscreen() #152

alfalabs opened this issue Apr 9, 2016 · 4 comments
Labels
enhancement p1 - backlog

Comments

@alfalabs
Copy link

alfalabs commented Apr 9, 2016 •
edited
Loading

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

  • Chrome
  • Firefox
  • 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()
@valdrinkoshi
Copy link
Member

Hi @alfalabs, can you please provide a jsbin example showing the issue?

@alfalabs
Copy link
Author

alfalabs commented Apr 22, 2016 •
edited
Loading

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>

@valdrinkoshi
Copy link
Member

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.

@alfalabs
Copy link
Author

Thanks, providing backdropElement setter would be a great enhancement.

@valdrinkoshi valdrinkoshi mentioned this issue May 4, 2016
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement p1 - backlog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@valdrinkoshi @alfalabs