Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit714ff4e

Browse files
kalenikaliaksandrawesomekling
authored andcommitted
LibWeb: Fix previous style calculation for CSS transitions on pseudo
...elements. Adds missing pseudo-element type passed into computedproperties getter.Previously, due to this bug, we were using the element's computedproperties 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, whereeach emoji has `::after` pseudo-element. We were incorrectly triggeringtransitions on all their properties, resulting in significantunnecessary work in style computation and animation event dispatching.
1 parent2fc405f commit714ff4e

File tree

3 files changed

+56
-1
lines changed

3 files changed

+56
-1
lines changed

‎Libraries/LibWeb/CSS/StyleComputer.cpp

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2724,7 +2724,7 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
27242724
// 9. Transition declarations [css-transitions-1]
27252725
// Theoretically this should be part of the cascade, but it works with computed values, which we don't have until now.
27262726
compute_transitioned_properties(computed_style, element, pseudo_element);
2727-
if (auto previous_style = element.computed_properties(); previous_style) {
2727+
if (auto previous_style = element.computed_properties(pseudo_element)) {
27282728
start_needed_transitions(*previous_style, computed_style, element, pseudo_element);
27292729
}
27302730

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
running animations count (0) should be zero
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<scriptsrc="../../include.js"></script>
5+
<style>
6+
.container {
7+
display: flex;
8+
gap:2rem;
9+
padding:2rem;
10+
font-size:4rem;
11+
flex-wrap: wrap;
12+
}
13+
.emojiItem_fc7141 {
14+
position: relative;
15+
}
16+
.emojiItem_fc7141:after {
17+
border:3px solid#fde047;
18+
content:"";
19+
height:100%;
20+
width:100%;
21+
left:0;
22+
opacity:0;
23+
position: absolute;
24+
top:0;
25+
z-index:5;
26+
transition: all1s ease-in-out;
27+
}
28+
</style>
29+
</head>
30+
<bodyclass="full-motion">
31+
<divid="emojiContainer"class="container">
32+
<spanclass="emojiItem_fc7141">😀</span>
33+
<spanclass="emojiItem_fc7141">😎</span>
34+
<spanclass="emojiItem_fc7141">🚀</span>
35+
</div>
36+
<script>
37+
constcontainer=document.getElementById("emojiContainer");
38+
asyncTest(done=>{
39+
constspan=document.createElement("span");
40+
span.className="emojiItem_fc7141";
41+
span.textContent="🌟";
42+
container.appendChild(span);
43+
requestAnimationFrame(()=>{
44+
println(
45+
`running animations count (${
46+
document.getAnimations().length
47+
}) should be zero`
48+
);
49+
done();
50+
});
51+
});
52+
</script>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp