Quirky behavior of particular ::before pseudo element CSS transition #39225
Description
Describe the bug:
For a particular container that has a ::before pseudo element and transition, the transition could stop midway unexpectedly.
Servo-39225.mp4
To Reproduce:
Run the following HTML,
<!DOCTYPE html>
<style>
.container::before {
content: "";
display: block;
transition: width .5s;
width: 0;
height: 10px;
background-color: red;
}
.container.active::before {
width: 100px;
}
</style>
<div class="container">
Click me!
</div>
<div class="container">
Don't click me!
</div>
<script>
let isActive = false;
const target = document.getElementsByClassName("container")[0];
target.onclick = () => {
isActive = !isActive;
target.className = isActive ? "container active" : "container";
};
</script>And follow the sequence of operation.
- Click the first
<div>container containingClick me!. - Immediately flick cursor. moving it out from the container.
- Try again if you did not see the transition error.
Platform:
Not a platform dependent bug.