2

When you use the full-screen api to go full screen on an Android device, it works fine, however the window inner height does not get updated correctly until you touch the screen again.

I am using

 document.documentElement.requestFullscreen();

see this code pen

https://codepen.io/Bob_mcbob/pen/gOBNLEo

Also watch the gif below that is record on my phone. You will notice the screen size originally says 914 when I go full screen, then when I click the screen it jumps down to 866.

I believe this 48px difference is for the bottom navigation bar.

My question, why is this happening? How can I force the window.innerHeight to refresh without touching the screen ?

This doesn't happen on an iPhone (safari) and doesn't happen on Firefox (android) seems to be Chrome-specific,

enter image description here

user2445278
  • 808
  • 1
  • 8
  • 15

2 Answers2

0

Ugh I just ran into this bug too, pretty sure this is a Chrome bug, it's happening when I full-screen my webcam UI, only option is to disable fullscreen camera capture on Chrome where I don't have the window jump, or find a way to force the redraw to prevent it from thinkign the page is 48px taller than it actually is (and therefore is drawing controls partially off the bottom of the screen)

StrangeWill
  • 2,106
  • 1
  • 23
  • 36
0

So far I have never seen a proper solution to this issue. For now, I'm using a modified version of the fix found in this link (https://css-tricks.com/the-trick-to-viewport-units-on-mobile/), but instead of using window.innerHeight which is currently buggy when triggering fullscreen, I'm tracking screen.height instead.

document.documentElement.style.setProperty('--screen-height', `${screen.height}px`);

You should preferably have this js triggered on page load.

.container {
    height: var(--screen-height);
}

<!DOCTYPE html>
<html lang="en" style="--screen-height: 100vh"><!-- initial fallback of screen height -->
    <body>
        <div class="container">CONTENTS</div>
    </body>
</html>
thisjt
  • 163
  • 2
  • 14