2

I'm working on a fullscreen web app (PWA) for an Android phone using Chrome. I've added a webmanifest file with the display property set to fullscreen. However, when I open the app from the home screen, there's a persistent 48px overflow, even on an empty page.

I've tried setting the html and body height to 100% and overflow to hidden, as well as various other CSS and JavaScript solutions (such as using window.visualViewport.height), but the overflow remains.

Here is my current setup:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Fullscreen Web App</title>
</head>
<body>
</body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
}

* {
  box-sizing: border-box;
}

JavaScript (using window.visualViewport.height):

function setViewportHeight() {
  const viewportHeight = window.visualViewport.height;
  document.documentElement.style.height = `${viewportHeight}px`;
  document.body.style.height = `${viewportHeight}px`;
}

window.addEventListener('load', setViewportHeight);
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);

The 48px overflow is still present, even if I set the body and html height to a smaller value, like 20px. How can I eliminate this overflow and ensure that my fullscreen web app displays correctly on Android phones using Chrome?

Also, although my first encounter of this issue was on Zebra scanners, it happens on every Android device. This problem however does not occur on iOS devices.

TomKorec
  • 206
  • 2
  • 6
  • why not simply use viewport relative units such as `vh` and `vw`? – tacoshy May 12 '23 at 07:55
  • Thanks for a reaction. Any viewport units don't work either. It does not only fill the screen but the overflowing part as well as if the screen had of 48px more – TomKorec May 12 '23 at 08:02

1 Answers1

2

I've got the exact same problem here.

And we're not alone : Chrome-Mobile PWA Fullscreen: App Area Exeeds HTML Height

It might be a chrome bug, my chrome version is 113.0.5672.162.

If someone ever find a solution, help

Benjamin Kielinski
  • 21
  • 4
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 06 '23 at 17:44