Scroll event flicker on position:sticky element in Safari iOS

[arianshi]

What version of Tailwind CSS are you using?

"tailwindcss": "^3.4.4",
"tailwindcss-animate": "^1.0.7",

 <header className="z-20 flex w-full top-0 grow-1 sticky bg-cool-gray-900">
        <div className="w-full h-full relative overflow-hidden safe-area-top">
       
 </header>

What build tool (or framework if it abstracts the build tool) are you using?

Vite

What version of Node.js are you using?

v21.6.2

What browser are you using?

On Safari IOS

What operating system are you using?

macOS, Windows

Describe your issue

the searchbar filter on market app uses position: sticky CSS on mobile view, so that it can be scrolled away when the user scrolls downwards (to minimise space)

on certain occasions, when the user scrolls up and down rapidly, the component will flicker. this is because the stickied element may or may not occupy space in the DOM, and it may switch between these two states rapidly

i do not have a good recording of this issue currently, because it is difficult to replicate on demand. but it happens most often on iOS due to compatibility issues

documentation of similar problems:
Shrinking sticky sticky header causes flicker in Blink/Webkit at certain scroll positions
Sticky Header Blinking - CSS-Tricks

[adamwathan]

Hey! This is an issue with CSS itself I'm afraid, not with Tailwind. Converting to a discussion in case anyone has any suggestions on how to work around it though.

[deanmuse-ls]

I am experiencing the same issue 😞