search

whatwg / fullscreen

Fullscreen API Standard
https://fullscreen.spec.whatwg.org/
Other
101 stars 42 forks source link

Cannot scroll in IE11 while in fullscreen by Fullscreen API #23

Open Kinna opened 9 years ago

Kinna commented 9 years ago

I found out that my web application cannot scroll in IE 11 when it is put in fullscreen by the Fullscreen API. The scrolling works fine when it is put in fullscreen by hitting F11.

I tested it on some demos other people have made, and I experienced the same problem. For example on this demo: http://codepen.io/matt-west/pen/hmqsF

Is that an issue in Fullscreen API?

foolip commented 9 years ago

This may be a spec bug, because it uses the style position:fixed !important. @upsuper, this issue looks related to https://github.com/whatwg/fullscreen/issues/19, perhaps you have some ideas?

upsuper commented 9 years ago

It is not a spec bug, because the spec doesn't even have the behavior of viewport scrollbar specified at all.

The fullscreen element being position: fixed !important is fine, because the width and height of fullscreen elements are fixed, and thus if there is any content overflowed inside the fullscreen element, scrollbar may still appear on the fullscreen element.

Currently, browsers apply overflow: hidden !important to :root if it is a fullscreen ancestor, so that we don't display useless and annoying scrollbar. However, what happens to this case is that, it requests fullscreen on the root element, and I suspect IE applies overflow: hidden !important on :root even if the root itself is the fullscreen element. Firefox and Chrome work just fine with the testcase, so this particular case actually indicates an impl bug instead of a spec bug.

But the problem for the spec is, all impls currently just inherit the old behavior, which no longer exists in the spec. We need to add some mechanism for that anyway. This could be a spec bug if we do it wrong in the future, but it is not one at this moment.

upsuper commented 9 years ago

If it is really desired to have viewport scrollbar available for <dialog>, I suggest the spec say something like, if the fullscreenElement is not null, and it is not the root element, hide the viewport scrollbar. Then we can fix this bug and close #19.

r12f commented 9 years ago

I believe the root overflow hidden issue has been fixed in Edge, so Edge should have the same behavior as FireFox and Chrome in this case.

And @upsuper, just to confirm, does

if the fullscreenElement is not null, and it is not the root element, hide the viewport scrollbar

mean adding :root:fullscreen-ancestor { overflow: hidden; !important } style in the spec?

upsuper commented 9 years ago

Effectively, yes. But I don't think we should bring back the removed :fullscreen-ancestor pseudo-class only for this. :fullscreen-ancestor would be less efficient to maintain if we do not restrict what element may go fullscreen.

upsuper commented 9 years ago

Actually, one difference I just found. If you have, say, overflow: scroll; on <body>, and the default overflow: visible for :root, when you request fullscreen on document.body, whether the scrollbars appear depends on the wording.

For :root:fullscreen-ancestor { overflow: hidden !important; } approach, the body element will have its scrollbar, however, if we "manually" hide the viewport scrollbar instead of using the style, there would not be any scrollbar, becasue in that case, the overflow property of body is propagated to the viewport.

Kinna commented 8 years ago

Is there anything I can do in my application, for example some CSS tricks, to make the scrolling work in IE?

weijyewang commented 7 years ago

I encounter such a problem as well. It is very unfortunate that I have to support IE11. Is there any solution for IE?

upsuper commented 7 years ago

The solution is: don't request fullscreen on root element.

crisc2000 commented 7 years ago

my solution https://stackoverflow.com/a/44482445/4481831