animation-fill-mode does not correctly apply viewport-based units

• Component: Animations
• Status: NEW ---

[Will Harris]

If an animation is applied with an "animation-fill-mode", and the values in the first/last animation frame are expressed using viewport units (vw, vh), the affected element will not be correctly positioned if the viewport is subsequently resized after the animation has ended (e.g. desktop browser when resizing, mobile browser when orientation is changed).

The attached test case reduction shows the issue. It contains three divs, all positioned with viewport units:

- one reference div, unanimated
- one div animated without "animation-fill-mode"
- one div animated with "animation-fill-mode"

The animated divs share the same animation and CSS positioning. The only difference is that the last div's animation also uses a fill mode.

When the browser window is resized, the top two divs move correctly, and remain aligned with a reference marker line. The last div does not move as expected to respect the changed viewport size.

[Will Harris]

Chrome and Firefox show what I would consider the correct behaviour.

[Radar WebKit Bug Importer]

<rdar://problem/80075191>

[Smoley]

It looks like the test case failed to attach. Please try adding it again.

[Will Harris]

Sorry, test case added in the URL field:

https://will.harris.ch/tcr-animation-fill-mode.html

[Antoine Quint]

Thanks for filing this., I can reproduce the issue with STP 131.

[Ahmad Saleem]

It is still reproducible in STP188 using attached test case where while animation is running, if you change window size, the last div is stuck.