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.

Answer 1

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);
  }
}