Intersection Observer doesn't works properly when a CSS Transform brings the element inside viewport

Question

I initialise an Intersection Observer without specific options so the threshold equals to 0.0 and the event should trigger just when the first pixel of the observed element enters the viewport.

That's what happens when I trigger the observer by scrolling and also when I trigger it using a transition defined with a simple CSS property like top. But when the observed element appears in the viewport thanks to a CSS transform that is animated with a transition the observer doesn't triggers the callback until the animation is over. I need it triggered just in the moment the element appears inside the viewport, as it should be.

You can see an example here: https://jsfiddle.net/38v2dots/2/

My real world problem is with a carrousel library that works (unnecessarily) with a CSS 3D transform. But the problem happens also with 2D transforms. Unfortunately I'm forced to use this library so avoiding the 3D transform isn't an option.

Thank you in advance.

Seems like Chrome doesn't track intersection while element is animating. See this code sample: https://codepen.io/talmand/pen/oNvdQOR/ . Other browers are working as expected. More info about browser behavior differences in this long article: https://www.seowebdesignllc.com/an-explanation-of-how-the-intersection-observer-watches/ — Andrej Pavlovic, Apr 16 '20 at 04:15

score 1 · Answer 1 · edited Oct 15 '21 at 13:57

I have the same situation. And I found that if you constantly move/click your mouse, the Observer will work fine.

So I think it's the paint event that maintain the Observer's working.

Then I add a little other property in the @keyframes, it just work fine! such as:

@keyframes sidetoside {
  0% {
    transform: translate3d(-400px, 0, 0);
  }
  50% {
    left: 0px;  // 
  }
  100% {
    transform: translate3d(400px, 0, 0);
  }
}

Intersection Observer doesn't works properly when a CSS Transform brings the element inside viewport

1 Answers1