1928899 - animating X/width/ margins happens in fazes instead of in 1 motion

Status: UNCONFIRMED

(Core :: CSS Transitions and Animations, defect)

Description

[Tanghe]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0

Steps to reproduce:

Im trying to set things up so that filtered out things disapear smoothly. using only css for the animations themselves.

This might be because of how its defined in the css library but this behaviour is wonky and unexpected and shouldt require extra rust or JS logic.

@keyframes growHorizontally {
0% {
transform: scaleX(100%);
opacity: 0;
margin: 0; /* Remove margin to prevent spacing /
max-width: 0%; / Collapse width to 0 to ensure no space is left /
padding: 0; / Remove padding to collapse fully /
visibility: hidden;
}
100% {
transform: scaleX(0%);
opacity: 0;
margin: 0; / Remove margin to prevent spacing /
max-width: 0%; / Collapse width to 0 to ensure no space is left /
padding: 0; / Remove padding to collapse fully /
visibility: hidden;
}
}
/ Basic styles for tags /
.tags {
all: unset;
color: hsl(280, 7%, 50%);
margin: 0.7rem;
display: inline-block; / Ensures margin is applied properly /
flex-shrink: 0; / Prevent unwanted shrinking of other tags */
}

.tags.disappearing {
animation: shrinkHorizontally 2s ease forwards;
transform-origin: left;
transition: margin 700ms;
min-width: 0;
white-space: nowrap;
}

Actual results:

1: first the hiding tags padding ects start shrinking together with them fading to dark.

2: then suddenly all the tags overlap each other in the same place and the still visable tags suddenly jump to the right allot and then continieu creeping to the center.

3. the text seems to never have actually beem transformed to reduce in x size.

Expected results:

1. all the elements rescale to 0 all starting and anding at the same time
2. the text never overlaps because the scaling of the text and the scaling of the.container happen simultaneous and the view adjusts.
   3.. there is a smooth animation where the remaining tags simply move to the center.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report. Could you please attach or link to an actual live testcase/reproduction of the issue? The CSS that you attached isn't sufficient to trigger the issue.

(We could theoretically write some simple HTML ourselves and apply your CSS to it; but if we find that the issue doesn't reproduce on our end, it's hard to know whether that's because our testcase isn't complete [which it probably wouldn't be] vs. if we happened to stumble on the right testcase but we've simply got a different Firefox version, or different settings, or different hardware that doesn't reproduce the bug.)

To reduce variables - since you're presumably seeing the bug with some testcase or page locally, it's best if you can just share that page or testcase, and we can start from there.

Comment 2

[Tanghe]

Attachment: mozilla-fazed-anim.zip

leptos rust small app

i don't know js made this.

install cargo leptos

cargo install --locked cargo-leptos

run

cargo letos watch