w3c/IntersectionObserver

Intersection Observer + CSS transform

rwlbuis opened this issue · 3 comments

rwlbuis commented

I noticed implementations behave differently on Intersection Observer combined with CSS transform:
https://jsfiddle.net/38v2dots/2/

In Firefox the callback is triggered as soon as 1 pixel of the image is visible in the viewport. In Chrome the callback is triggered once the complete CSS transform is finished.

I personally like Firefox behaviour more here. Is there anything in the spec(s) about this? I also wonder what the rules are for CSS animations instead of transforms?

miketaylr commented

Hi @rwlbuis - thanks for the issue. When testing with Chrome M102 and Firefox Nightly 102 (on Mac), I see the same results in https://jsfiddle.net/38v2dots/2/. Safari, on the other hand, seems to only trigger the callback when the transition if finished. Could you please verify?

rwlbuis commented

On my Mac Chrome 102 and Safari behave the same, i.e. only trigger the callback when the transition is finished. Firefox 101 still triggers as soon 1 pixel of the image is visible in the viewport, nightly too.

miketaylr commented

OK, that's a bit odd. I just re-tested and see what you're describing in Chrome 102 as well. I just noticed that if I double click the button (or just spam click it, which I probably did yesterday) in Chrome, I see "Callback triggered! Image is inside!" pretty much immediately. But not in Safari. So that's weird.