1374171 - position: sticky combined with height adjustment causes scrolling glitches (bouncing)

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[reason.koan]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36

Steps to reproduce:

Go to https://codepen.io/bluefantail/pen/zzKNpR
Attempt to scroll to the bottom of the container.


Actual results:

The header becomes smaller, then glitches (bounces) for a couple of seconds, then the container scrolls back up and the header becomes large again.


Expected results:

The header becomes smaller and the scroll position stays at the bottom.

Comment 1

[reason.koan]

From https://stackoverflow.com/questions/44567125/position-sticky-scroll-bouncing-when-combined-with-javascript-height-adjustme/44573447

Comment 2

[reason.koan]

Behaviour in other browsers (from the StackOverflow question, reproduced):

"In chrome, this bouncing can never be resolved, it stays in the infinite loop constantly adding / removing the stuck class. More interestingly in Safari, the scroll position is 'pushed back' to a state where it wont bug out."

Also raised as a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=734461

Comment 3

[Mohammad Reza Ghasemi]

I have this issue too. You can see my StackOverflow question with a snippet and CodeSandbox below:

Stackoverflow question
CodeSandbox

Comment 4

[Mohammad Reza Ghasemi]

I found the solution:

Set a wrapper around the sticky element, and handle the generated white space via transform to prevent the layout shift.

https://codesandbox.io/p/sandbox/intersection-observer-bouncing-issue-4g34hn