4

I have a page with fixed header and footer using Bootstrap3. The content beneath is scrollable. The user may enable the fullscreen mode via F11 or a button (using the FullScreen-API). This works fine in Chrome and FF but has problems in IE11. Fullscreen with F11 works always fine. But toggling fullscreen mode with javascript causes my page to be placed at the top bottom with shrinked width and height when using IE11. My header and footer remain intact.

<body>
    <header>Fixed</header>
    <main>Scrollable</main>
    <footer>Fixed</footer>
</body>

I have created a small fiddle, that may show what I'm doing. Unfortunately the fullscreen wont be toggled in JSFiddle, so better copy the code to somewhere else: https://jsfiddle.net/j122kdju/

Here are two screenshots from the site. I gave the html a green backgound color to see what's happening when enabling fullscreen via JS API. First image shows the page without fullscreen in IE11:

enter image description here

The second shows fullscreen enabled via JS API in IE11:

enter image description here

I may handle this issue by setting html width in css to 100%. Anyway, pages with overflow can't be scrolled anymore. The scrollbar is not visible. As said, this works fine in other browsers.

Is there any workaround available? Am I missing something here? Thanks

EDIT: Maybe related: IE cannot scroll while in fullscreen mode

Community
  • 1
  • 1
Fidel90
  • 1,677
  • 3
  • 22
  • 59
  • Is this a browser bug? I have tried the following fullscreen example page and there I'm also unable to scroll in IE11, after fullscreen mode has been enabled via the HTML5 API: http://robnyman.github.io/fullscreen/index-high-content.html – Fidel90 Nov 06 '15 at 12:01
  • 1
    I added an issue on Fullscreen API's github site when I got this problem: https://github.com/whatwg/fullscreen/issues/23 – KMK Nov 06 '15 at 14:52
  • @KMK: Ok great, hopefully that helps :) For now I have to disable the fullscreen option in IE... – Fidel90 Nov 09 '15 at 06:39
  • see the answer that i gived here https://stackoverflow.com/questions/32310095/ie-cannot-scroll-while-in-fullscreen-mode/44482445#44482445 – crisc2000 Jun 11 '17 at 10:06

2 Answers2

1

if you want the entire page fullscreen the solution is to send "document.body" for IE11 and "document.documentElement" for Chrome and Firefox

see my complete answer here: IE cannot scroll while in fullscreen mode

crisc2000
  • 490
  • 5
  • 15
0

You can try to set html width to 100% as you said and then force the body to have a scrollbar using 

body {
overflow-y: scroll;
}
steiacopi
  • 27
  • 7
  • I already have `overflow-y: auto;` on my `body` element. Changing that to `scroll` doesn't help. IE11 still wont show a scrollbar and scrolling content is impossible... :( – Fidel90 Nov 06 '15 at 09:04