There is an interesting distinction in the way Chrome and Safari handle the CSS property position: sticky on elements.
When a sticky element increases in height, while being offset from its initial position due to scrolling, Chrome adjusts the scrollTop position accordingly, making it seem like the content remains stationary as the sticky element expands over it.
https://i.sstatic.net/7rLn2.gif
In contrast, Safari keeps the scrollTop position constant in this scenario, resulting in the appearance of the content shifting down to accommodate the taller sticky element.
https://i.sstatic.net/csSd2.gif
Below is a code snippet demonstrating how each browser behaves in this situation. The accompanying screenshots illustrate the behavior of this demo on Chrome and Safari, but you can try it out yourself here.
function grow() {
const header = document.getElementById("header");
document.getElementById("header").classList.toggle("large-header");
updateScrollText();
}
function updateScrollText() {
const container = document.getElementById("container");
const scrollParent = getScrollParent(container);
document.getElementById("scrollbarpos1").innerHTML = scrollParent.scrollTop;
document.getElementById("scrollheight1").innerHTML = scrollParent.scrollHeight;
document.getElementById("containerheight1").innerHTML = container.offsetHeight;
document.getElementById("scrollbarpos2").innerHTML = scrollParent.scrollTop;
document.getElementById("scrollheight2").innerHTML = scrollParent.scrollHeight;
document.getElementById("containerheight2").innerHTML = container.offsetHeight;
}
function getScrollParent(node) {
if (node == null) {
return null;
}
if (node.scrollHeight > node.clientHeight) {
return node;
} else {
return getScrollParent(node.parentNode);
}
}
window.onscroll = updateScrollText;
window.onload = updateScrollText;#header {
background-color: #CACACA;
position: sticky;
top: 0;
padding: 20px;
}
.large-header {
height: 100px;
}
.content {
background-color: #a2a6c4;
height: 1500px;
}
.shift-down {
margin-top: 50px;
}<div id="container">
<div id="header">
<button type="button" onclick="grow()">Grow/Shrink</button>
</div>
<div class="content">
<br>
Scrollbar position: <span id="scrollbarpos1">0</span>
<br>
Scroll height: <span id="scrollheight1">0</span>
<br>
Container height: <span id="containerheight1">0</span>
<br>
<br>
Voluptatibus omnis perspiciatis consequatur magni error exercitationem saepe qui. Ipsa sint non labore voluptates. Asperiores aut non ullam aut sit omnis ducimus in. Aut enim nihil unde ad expedita. Ratione necessitatibus quasi dolorem sunt aperiam nobis ducimus.
Sequi quasi maiores eos aut non. Ipsam delectus sit facilis aut. Dolor facilis eum dignissimos. Vero reiciendis odio quis blanditiis.
Error nesciunt rem facilis. Neque labore et qui sequi eos corrupti dolorem. Reprehenderit qui voluptatem et neque ducimus ipsum similique fugit. Ea sint alias qui laborum nesciunt. Nihil ex repellendus odit sint unde fuga.
A eum nulla ut cumque necessitatibus culpa exercitationem unde. Corrupti sit minima eveniet et aut possimus sapiente. Est accusantium aut ut numquam illo.
Praesentium fugit pariatur eum ad velit distinctio culpa id. Quia voluptatum dignissimos consequatur. Eaque nihil voluptas in voluptas voluptas eius voluptas.
<br>
<br>
<div class="shift-down">
Scrollbar position: <span id="scrollbarpos2">0</span>
<br>
Scroll height: <span id="scrollheight2">0</span>
<br>
Container height: <span id="containerheight2">0</span>
</div>
</div>
</div>I delved into the W3C spec on Positioned Layout, but did not find a definitive explanation for this discrepancy.
Here are my questions:
- Why do these two browsers exhibit different behaviors?
- Is there a "correct" way that one of them follows?
- Can both browsers be made to behave consistently in either direction?