eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-27 02:05:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Fix previous style calculation for CSS transitions on pseudo

Browse Source 
...elements. Adds missing pseudo-element type passed into computed
properties getter.

Previously, due to this bug, we were using the element's computed
properties as the previous computed properties for its pseudo-elements.
This caused an excessive number of unintended CSS transitions to run.
The issue was particularly noticeable in Discord's emoji picker, where
each emoji has `::after` pseudo-element. We were incorrectly triggering
transitions on all their properties, resulting in significant
unnecessary work in style computation and animation event dispatching.
This commit is contained in:
Aliaksandr Kalenik
2025-07-18 19:53:32 +02:00
committed by Andreas Kling
parent 2fc405f1b2
commit 714ff4e3f9
Notes: github-actions[bot] 2025-07-18 19:20:41 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/714ff4e3f95
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5510
3 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Tests/LibWeb/Text/input/WebAnimations/transitions/transition-on-pseudo-element.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../include.js"></script>
<style>
.container {
display: flex;
gap: 2rem;
padding: 2rem;
font-size: 4rem;
flex-wrap: wrap;
}
.emojiItem_fc7141 {
position: relative;
}
.emojiItem_fc7141:after {
border: 3px solid #fde047;
content: "";
height: 100%;
width: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 5;
transition: all 1s ease-in-out;
}
</style>
</head>
<body class="full-motion">
<div id="emojiContainer" class="container">
<span class="emojiItem_fc7141">😀</span>
<span class="emojiItem_fc7141">😎</span>
<span class="emojiItem_fc7141">🚀</span>
</div>
<script>
const container = document.getElementById("emojiContainer");
asyncTest(done => {
const span = document.createElement("span");
span.className = "emojiItem_fc7141";
span.textContent = "🌟";
container.appendChild(span);
requestAnimationFrame(() => {
println(
`running animations count (${
document.getAnimations().length
}) should be zero`
);
done();
});
});
</script>
</body>
</html>