Bug with zIndex / shadowBlur

[almoehi]

Hey, I ran into this while debugging animation issues and finally was able to trace it down. If you combine zIndex + shadowBlur - the rive animation does not play. If you remove the shadowBlur (or zIndex) - the animation does work fine

I suspect that this is not specific to Rive animations - I have a few other regular tweens in my scenes that all of a sudden got messed up (as in: they worked smoothly and suddenly showed strange jumps)

reproducer:

import { makeScene2D, Rect, Rive } from '@revideo/2d';
import {
  createRef,
  Reference,
  waitFor,
} from '@revideo/core';

export default makeScene2D(function* (view) {

    const listViewRef = createRef<Rect>();
    const riveRef = createRef<Rive>();

  yield view.add(
      <>
          <Rect ref={listViewRef} y={100} size={[600, 600]} radius={15} opacity={1} zIndex={50} />

          <Rive ref={riveRef}
                src={'/rive/icons.riv'}
                y={200}
                width={200}
                height={200}
                artboardId={'Medal'}
                animationId={'Medal'}
                zIndex={10}
          />

      </>
  );

    view.fill('white');

    const rect1Ref = createRef<Rect>();
    const rect2Ref = createRef<Rect>();
  yield listViewRef().add(getRiveNode(rect1Ref));
  yield listViewRef().add(getBuggyRiveNode(rect2Ref));

  yield * waitFor(5);

});

function getRiveNode(ref: Reference<Rect>) {
    return (
        <Rect ref={ref} size={[580, 150]} x={400} y={-200} fill={'green'} shadowColor={'orange'} opacity={1}>
            <Rive
                src={'/rive/icons.riv'}
                width={200}
                height={200}
                artboardId={'Medal'}
                animationId={'Medal'}
                zIndex={10}
            />
            <Rect x={100} size={[50, 50]} fill={'white'} />
        </Rect>
    );
}

function getBuggyRiveNode(ref: Reference<Rect>) {
    return (
        <Rect ref={ref} size={[580, 150]} x={-400} y={-200} fill={'red'} shadowColor={'orange'} shadowBlur={10} opacity={1}>
            <Rive
                src={'/rive/icons.riv'}
                width={200}
                height={200}
                artboardId={'Medal'}
                animationId={'Medal'}
                zIndex={10}
            />
            <Rect x={100} size={[50, 50]} fill={'white'} />
        </Rect>
    );
}