Having an issue with flex/height
Hello,
I am new to gsap and I am having on issue.
On my website I use tailwindcss and I have a main layout for my pages. Instead of using "fixed" position for my headers/navigations I am using "flex-1" (flex: 1 1 0%; in normal css) on my main content with an overflow-scroll so my headers/navigations remain as if they were "fixed" at the top but the content is scrollable. You can refer to the CodePen.
However in order for my layout to work I need to add "h-screen" (height: 100vh; in
Okay, I can see the behavior in Safari, and it's because the browser is not synchronizing the handling of the scrolling and the JS main thread. Most browsers only do that on the main window/body. So when you scroll, the browser instantly renders the content in that new position, THEN the JS runs and makes the necessary adjustment to make it appear fixed, so you see a judder. I am not aware of any way to force the browser to keep those things synchronized. If anyone else does, I'm all ears.
