search

w3c / IntersectionObserver

Intersection Observer
https://www.w3.org/TR/intersection-observer/
Other
3.62k stars 531 forks source link

Intersection Observer + CSS transform #484

Open rwlbuis opened 2 years ago

rwlbuis commented 2 years ago

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 2 years ago

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 2 years ago

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 2 years ago

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.