Bug 227615
| Summary: | animation-fill-mode does not correctly apply viewport-based units | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Will Harris <will-web-webkitbugs> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, dino, graouts, koivisto, smoley, webkit-bug-importer |
| Priority: | P2 | Keywords: | HasReduction, InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://will.harris.ch/tcr-animation-fill-mode.html | ||
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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.