Affected platforms:

Ubuntu 18

Affected versions:

72.0a1

Description:

When hovering over/away from the PiP icon from the right side of the video frame, the flyout will perform a slide-in/slide-out animation. It was observed that during this animation the position of the flyout is shifter ~1 pixel upward. Check the GIF attached for more information.

Steps to reproduce:

1. Open any page that contains video content and start the video
2. Hover over the PiP icon

Expected result:

The flyout performs a slide-left animation

Actual result:

The position of the flyout is shifted ~1 pixel upwards while the animation is perfomed. The position of the flyout is corrected as the animation stops. The same behavior can be observed when the flyout slides back as the cursor leaves its area.

According to bug 1599492, this was caused by bug 1574493.

The picture-in-picture element has an initial transform when not animating, with translateY and translateX components:

https://searchfox.org/mozilla-central/rev/04d8e7629354bab9e6a285183e763410860c5006/toolkit/themes/shared/media/videocontrols.css#452

And when you hover over it, it only changes the translateX component:

https://searchfox.org/mozilla-central/rev/04d8e7629354bab9e6a285183e763410860c5006/toolkit/themes/shared/media/videocontrols.css#499

I suspect that it initially snaps using the translateX/translateY components. When the animation begins, it adds a stacking context indicating the transform is animated, and it snaps to identity. When the animation completes, it presumably removes the stacking context, and resnaps using the new translateX/translateY components.

I expected will-change: transform would help, as that would force the stacking context for the animated transform, but it doesn't for some reason....