Intersection Observer + CSS transform

[rwlbuis]

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]

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]

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]

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.