scroll-padding-top boundary

This example file demonstrates a page-scroll-on-reload issue that appears to be caused by text elements straddling the border of scroll-padding-top. When a user reloads the page in this situation, the page may scroll slightly depending on the font size and line height of the text. The effect is more pronounced at larger font sizes and far-from-default line heights.

This paragraph and the one above use the default styling. At 1080p, this scroll-on-reload issue is not strong enough to cause trouble.

This paragraph has a line-height of 100%. This is slightly smaller than the default line-height. If the page is reloaded while the scroll-padding-top boundary is inside this paragraph, the view will scroll downwards by a small amount (~1px on a 1080p monitor). Once the boundary has reached the bottom, the page will scroll back to somewhere before this text. Further reloads may restart the process, even if the page reset to a position where the boundary is outside of the text.

This paragraph has a line-height of 150%. This is a bit larger than the default line-height. If the page is reloaded while the scroll-padding-top boundary is inside this paragraph, the view will scroll upwards by a small amount.

At larger font sizes, each reload scrolls farther.

line-height: 50% and font-size: 7rem.

Tested and reproduced on:

This div is here to simulate a large document to create a scroll bar.