13 replies

Help to fix overflow outside of <html> tag despite page being within viewport height

✅solved

front-end

Greetings all,

I am stumped on this issue which arose while I was developing a Tauri application. For some strange reason, checking a custom checkbox on an item under the initial visible area in a scroll container causes the entire page to be pushed upwards by the amount that the scroll container overflows. This occurs on the latest Firefox and Chromium on Windows and Linux (Mac and Safari not tested). I have extracted the relevant code directly from the app, so please excuse any leftover parts! If it is needed, I could continue to isolate and get rid of any unnecessary code.

Live demo: https://manderrow.github.io/viewport-bug-demo/
Associated repository: https://github.com/manderrow/viewport-bug-demo

Reproduction steps:
1. Visit the website
2. Scroll down a little bit on the mod list scroll container.
3. Check one of the checkboxes of a mod on near the bottom of the visible container area.

Turning off

overflow: hidden

overflow: hidden

on the

<body>

<body>

tag causes a scrollbar belonging to the

<html>

<html>

to appear. What confuses me especially is that the entire page height (the HTML tag) is not longer than the viewport, and so this overflowing content seems to be from some phantom dead space? Along with the fact that it's triggered by a seemingly benign checkbox? In the end, it seems as if there is a higher level container than the

<html>

<html>

itself which can be overflowed to have a scrollbar, despite of course the actual height of the page being within the viewport. Also, a simple reload does not reset the page, presumably because the browser saves scroll state. Putting

outline: 1px solid rebeccapurple

outline: 1px solid rebeccapurple

*, *::before, *::after

*, *::before, *::after

reveals some strange out of place boxes, but nothing with enough height to offset the scrollbar by that much, especially as I believe they would increase the computed height shown, although I suspect they're part of the issue.

I have attached a video and screenshots for further reference.

Any help on this matter would be greatly appreciated! Thanks!