fullscreen
fullscreen copied to clipboard
whatwg
Cannot scroll in IE11 while in fullscreen by Fullscreen API
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?
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?
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.
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.
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?
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.
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.
Is there anything I can do in my application, for example some CSS tricks, to make the scrolling work in IE?
I encounter such a problem as well. It is very unfortunate that I have to support IE11. Is there any solution for IE?
