Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upThe `Idle` state is not always reached at the end of css transitions #20379
Comments
|
Here's a test case: <!DOCTYPE html>
<html>
<head>
<style>
div {
transition: transform 0.5s;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: teal;
}
div.moved {
transform: translate(150px, 150px);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
window.addEventListener("click", () => {
document.getElementById("box").classList.toggle("moved");
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>if you apply this patch: and click a couple of times to get the box back to (0, 0) you will see that In |
|
Maybe related to issue #20116 |
|
#14418 didn't make sense. See the |
|
Our transitions story in general makes no sense, apparently. |
|
|
|
I fixed animations in #20757, but not really, only my free time... |
|
On a transition, are we supposed to wakeup the embedder loop on each frame? It looks like we do, but I thought that the point of |
|
Dupe. STR from #25262 <style>
div {
width: 200px;
height: 200px;
margin:200px;
background: red;
transition: 200ms linear transform;
}
div:hover {
transform:scale(1.2);
}
</style>
<div></div>
|
|
After animation is over, it is stopped, and ran again, and stopped, and ran again… After each animation, the animation sender resend an animation. Basically after the animation is over, this is called again: servo/components/style/animation.rs Line 405 in b7aaff4 |
Avoid infinitely looping CSS transitions. This change addresses the long-standing issue of CSS transitions not ending appropriately. It does not fundamentally change the way we process transitions/animations. --- - [x] `./mach build -d` does not report any errors - [x] `./mach test-tidy` does not report any errors - [x] These changes fix #20379 - [x] There are tests for these changes
Avoid infinitely looping CSS transitions. This change addresses the long-standing issue of CSS transitions not ending appropriately. It does not fundamentally change the way we process transitions/animations. --- - [x] `./mach build -d` does not report any errors - [x] `./mach test-tidy` does not report any errors - [x] These changes fix #20379 - [x] There are tests for these changes
Avoid infinitely looping CSS transitions. This change addresses the long-standing issue of CSS transitions not ending appropriately. It does not fundamentally change the way we process transitions/animations. --- - [x] `./mach build -d` does not report any errors - [x] `./mach test-tidy` does not report any errors - [x] These changes fix #20379 - [x] There are tests for these changes
When a css transition is ongoing, the embedder is notified by the https://doc.servo.org/compositing/windowing/trait.WindowMethods.html#method.set_animation_state method with state value of
Animating, and then back with theIdlevalue once the animations are done.I have a couple of cases where we don't go back to the
Idlestate after a transition, and instead keep hammering the embedder withAnimatingnotifications. This may not be too much noticeable on desktop, but it can be pretty bad on some mobile devices (and it's wrong anyway).Just filing for now until I manage to build a simple enough test case to reproduce.