[feature request]: Support JavaScript Animation API

[dzNavitski]

Preflight Checklist

• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

2.0.0-alpha.5

Expected Behavior

Elemets with shadow DOM should have the appropriate styles.

https://user-images.githubusercontent.com/4883032/219647936-4f5a1213-c793-4d8c-adc9-57e0d1b507cf.mov

Actual Behavior

Styles for elements with shadow DOM are not recorded properly. It appears that some of the styles have been overlooked.

https://user-images.githubusercontent.com/4883032/219649353-3a181a72-4f87-4a04-a341-a1c77b7d5c1d.mov

Steps to Reproduce

Repository to reproduce the issue: https://github.com/dzNavitski/rrweb-styles-issue.git

Stackblitz: https://stackblitz.com/edit/angular-8pmqhd

Testcase Gist URL

https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2FdzNavitski%2F23503f9b102141d5cd7627155c8fb3f7&version=1.0.0-alpha.4&play=on

Additional Information

No response

[YunFeng0817]

After some debugging, I still can't figure out which part of the CSS styles is not applied correctly. Do you have any clue?

[dzNavitski]

After some investigation I found that RRWEB does not capture the final state of animation. In my exapmple .modal-wrapper has intial style transform: translate3d(0, 100%, 0). Once the modal opens, the transform value is translate3d(0, 0, 0). But in recording, transform value is always the same (translate3d(0, 100%, 0)). I guess it's the reason.

[YunFeng0817]

Thanks, that will be really helpful.

[YunFeng0817]

After the modal opens, the transform value is still transform: translate3d(0, 100%, 0).

[dzNavitski]

gist: https://gist.github.com/dzNavitski/1f6262f7bfbc124ff8bb421ab748f1fb video: https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2FdzNavitski%2F2b7b40f78ca959dcdbbac14138139bcc&version=1.0.0-alpha.4&play=on

https://user-images.githubusercontent.com/4883032/220100506-1af818f0-6496-4737-81e0-f32e5ea95db9.mov

Seems like web animations are not captured when it's applied to elements inside shadow dom.

[YunFeng0817]

@Juice10 I'm not sure whether the current version supports js constructed animation recording in the outermost dom. I need your help here. https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation

[Serg-Mois]

Also for example: We have created animation for ionic popovers:

export const popoverEnterAnimation = (baseEl: HTMLElement): Animation => {
    const root: HTMLElement | ShadowRoot = getElementRoot(baseEl);
    const wrapperElement: HTMLElement | null = root.querySelector('.popover-wrapper');

    const wrapperAnimation = createAnimation()
        .addElement(wrapperElement)
        .fromTo('transform', 'translateY(100%)', 'translateY(0%)')
        .fromTo('opacity', 0.01, 1)
        .easing('cubic-bezier(0,0,0.1,1)');

    return createAnimation().addElement(baseEl).easing('ease-out').duration(240).addAnimation([wrapperAnimation]);
};

and in rrweb events output I see just the initial state: .popover-wrapper { opacity: 0; So my popover is not displayed in replay, so I need manually replace opacity: 0 with the final expected state - opacity: 1; in output json to at least see popover on the screen even without animation.

[Juice10]

@Juice10 I'm not sure whether the current version supports js constructed animation recording in the outermost dom. I need your help here. https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation

We currently don't record/support any of this yet, but I agree we definitely should. Doing this could also allow us to record and play back the current time of css animations which would solve issue: https://github.com/rrweb-io/rrweb/issues/1491

I've added some details on what is needed for that here: https://github.com/rrweb-io/rrweb/issues/1491#issuecomment-2150757240