1909153 - Margin transition does not work properly when zoom property is set to something other than 100%

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, defect)

Description

[Pogbert]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

Styling a div with transition: margin and zoom set to a value other than 100% will cause most changes to the margin property to not animate. Specifically it'll only animate when it's reset back to 0px, however it doesn't do it properly.

This works correctly in chromium-based browsers.

Relevant codepen: https://codepen.io/pen/wvLWvLo

Actual results:

When the element has a zoom value other than 100%, the margin should animate smoothly between each value.

Expected results:

When the element has a zoom value other than 100%, the element's margin does not animate at all except for when it's reset to default, and in that case it doesn't animate correctly either.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Transitions and Animations' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Daniel Holbert [:dholbert]]

(CSS zoom issue for you when you've got cycles to poke, emilio.)

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from comment 0

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1909153 - Fix interaction of transitions and zoom. r=#style,#layout

The main issue here is that we transition the zoomed value, which is
generally wrong because the animated value gets injected back into the
cascade (and thus zoomed again).

We happen to cancel the transition in 1, which is kinda nice because
otherwise we would've just transitioned to a completely wrong value (and
maybe indefinitely, since values would keep getting bigger and
bigger...).

We need to do something similar to to_resolved_value, and unzoom lengths
in to_animated_value, that is, interpolate "unzoomed" values.

The extra test to test_transitions_per_property caught some existing
issues with calc() and zoom which are fixed too for the test to pass.

Same for the ToResolvedValue for Au, that is needed for properties like
column-rule-width to return the correct resolved values.

Main thing I left unfixed is bug 1909280, but that deserves a more
subtle test and a bit more thought because only matrix components need
to be zoomed.

While at it, I simplified the animation setup a little bit, removing the
special animation_value_type="ComputedValue", which means that we need
to add a few ToAnimatedValue calls.

Now the only values are "none", "discrete", and "normal", and given it's
not a value type anymore I called it just "animation_type".

This got a bit bigger than I would've liked, but also it fixes more bugs
that what I was originally expecting, so... :)

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Well this was a lot more broken than I initially thought :)

Thanks for the report!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/84786c6e87a4
Fix interaction of transitions and zoom. r=firefox-style-system-reviewers,layout-reviewers,boris

Comment 7

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/84786c6e87a4

Comment 8

[Emilio Cobos Álvarez [:emilio]]

I'm not convinced this is reasonably upliftable unfortunately.