Reading List

TIL: How to fix it when an element blinks when using intersection observer. from Oh Hello Ana RSS feed.

TIL: How to fix it when an element blinks when using intersection observer.

I recently built a page where a positioned sticky element would appear when another element wasn't visible anymore. For this, I used the intersection observer.

Later on, it was noticed that on an iPhone using Safari, it was as if this sticky item would start blinking, appearing and disappearing at certain scroll positions.

I had no idea why, but eventually, I found a comment buried on a GitHub thread that fixed my issue. I replaced position: sticky with position: fixed, and it got fixed! Why? I don't know. But now I know, I guess.

The project I was working on wasn't using React or any other JavaScript framework. Still, sometimes, the framework used is a red herring. It's best not to dismiss search results based on their title and just have a look.