Sticky header input scrolls on input
The problem is being caused by a combination of causes:
In the first place because if the content of input is changed outside of the current viewing page, by default the web browser will scroll to that input.
And in second place because by adding the property scroll-padding-top: 48px to the HTML tag you are kinda 'reducing' the size of the available visible page.
So for the combination of these two reasons is like your input is always just some pixels adobe the current viewing page, so the browser scrolls up a little bit to make it 'visible' (and that are the jumps that we can see when we write or delete anything in the input).
You can try the following:
html {
/* scroll-padding-top: -48px; */
}
body {
margin: 0;
}
header {
position: sticky;
top: 0;
background: #eeeeee;
padding: 8px 16px;
}
main {
padding: 8px 16px;
}
main article,
main div {
padding: 32px 0;
border-bottom: 1px solid lightgray;
}
main div {
background: #ddddff;
}
#anchor-point {
background: none;
z-index: -1;
position: relative;
padding: 0;
height: 48px;
margin-top: -48px;
} <html>
<body>
<header>
<input type='text' placeholder='type here, page scrolls' />
</header>
<main>
<article>
<p><a href='#anchor-point'>click me to skip down to the lower section</a></p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<div id="anchor-point"></div>
<div>
I also want to link to here. This section should not get cut off by the sticky header. The entire thing should be visible.
</div>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
</main>
</body>
</html>I hope it works for you!
This may not be a complete answer because it doesn't answer to the question "why?".
However, if you remove the scroll-padding-top: 48px from the html style, and add scroll-margin-top on the target anchor point you will get the expected result.
#anchor-point{
scroll-margin-top: 48px;
}
It's also possible to avoid using the id selector, with the :target pseudo-class selector
:target {
scroll-margin-top: 48px;
}