Chrome / Chromium page vertical scrolling on soft or hard reload when line-height is set, possible b-CodePudding

When soft or hard reloading a page, all newer Chromium based browsers on both Win and Mac perform a slight vertical scroll up between 2-15px depending on the web page's line-height setting, whether set on body or html.

Looking for confirmation and possible solutions if you can repeat and confirm.

EDIT: It's 100% definitely not my server/headers, it is 100% definitely a bug with Chromium since at least 96.0.1054.62.

<!doctype html>
<html>
    <head>
        <style>
            body{line-height:1.5} /* tried 1 - 2.5 in increments of .1 */
                                  /* removing line-height stops scrolling */
        </style>
    </head>
    <body>
        <p>lorem ipsum.....</p>
        <p>lorem ipsum.....</p>
        <!-- repeat until page scrolls -->
    </body>
 </html>

Removing line-height fixed the scrolling on reload for me.

Browsers confirmed bugged:

w11 edge: 96.0.1054.62
w81 chromium: 96.0.4664.45
mac chrome: 96.0.4664.110
w10 chrome: 96.0.4664.110
w10 edge: 96.0.1054.62
w10 opera: [latest]

EDIT

You can also go to any long scrolling wikipedia page and reproduce. This page has a fix in place, but I can't figure out how they do it: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

EDIT

Can confirm Firefox suffers the same, although much less frequently and not on subsequent reloads.

CodePudding user response：

This fix produces the same behavior on the dev.mozilla/CSS_Grid page linked above. You could get away with bringing the setTimeout to as low as 25, but lower than that and the rescroll won't happen.

/**
 * Maybe scroll on reload
 *
 * All Chromium browsers >= 96.0.1054.62 have a reload/rescroll bug that scrolls
 * the window if the page has line-height set
 *
 */

document.addEventListener( "DOMContentLoaded", function() {
    window.onbeforeunload = function() {
        sessionStorage.setItem( "scroll_pos", document.documentElement.scrollTop );
    };

    setTimeout( function() {
        var yPos = sessionStorage.getItem( "scroll_pos" );

        if ( yPos && yPos != document.documentElement.scrollTop ) {
            window.scrollTo( 0, sessionStorage.getItem( "scroll_pos" ) );
            sessionStorage.removeItem( "scroll_pos" );
        }
    }, 50 );
});

Anyone who could rewrite/refine my js would be welcome because I am terrible with it.