Scroll event flicker on position:sticky element in Safari iOS #14191
Description
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
Reproduction URL
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