mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-09 01:29:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Don't unconditionally relayout on animation/transition changes

Browse source 
If a CSS animation or transition was being used to manipulate a property
that itself does not affect layout, we were still doing a full relayout
whenever any animation or transition related property was changed.

As it turns out, we can just not do that, and we avoid a bunch of
unnecessary layout work on many pages. When a layout-affecting property
is being animated, the animation/transition update code takes care to
invalidate layout as appropriate anyway!

This was very noticeable on GitHub, where moving the mouse cursor
between "Issues" and "Pull requests" would trigger a full relayout every
time. Now that doesn't happen, and it's much more responsive. :^)
This commit is contained in:
Andreas Kling 2025-03-08 15:50:08 +01:00 • committed by Andreas Kling
commit def0bcdfa2
Notes: github-actions[bot] 2025-03-08 16:33:48 +00:00
1 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Libraries/LibWeb/CSS/Properties.json
View file

@ -169,7 +169,7 @@
] ]
}, },
"animation": { "animation": {
"affects-layout": true, "affects-layout": false,
"inherited": false, "inherited": false,
"initial": "none 0s ease 1 normal running 0s none", "initial": "none 0s ease 1 normal running 0s none",
"longhands": [ "longhands": [
@ -184,7 +184,7 @@
] ]
}, },
"animation-delay": { "animation-delay": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "0s", "initial": "0s",
@ -205,7 +205,7 @@
] ]
}, },
"animation-duration": { "animation-duration": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "auto", "initial": "auto",
@ -217,7 +217,7 @@
] ]
}, },
"animation-fill-mode": { "animation-fill-mode": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "none", "initial": "none",
@ -229,7 +229,7 @@
] ]
}, },
"animation-iteration-count": { "animation-iteration-count": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "1", "initial": "1",
@ -241,7 +241,7 @@
] ]
}, },
"animation-name": { "animation-name": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "none", "initial": "none",
@ -264,7 +264,7 @@
] ]
}, },
"animation-timing-function": { "animation-timing-function": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "ease", "initial": "ease",
@ -2810,7 +2810,7 @@
"percentages-resolve-to": "length" "percentages-resolve-to": "length"
}, },
"transition": { "transition": {
"affects-layout": true, "affects-layout": false,
"inherited": false, "inherited": false,
"initial": "none", "initial": "none",
"longhands": [ "longhands": [
@ -2821,7 +2821,7 @@
] ]
}, },
"transition-delay": { "transition-delay": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "0s", "initial": "0s",
@ -2830,7 +2830,7 @@
] ]
}, },
"transition-duration": { "transition-duration": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "0s", "initial": "0s",
@ -2839,7 +2839,7 @@
] ]
}, },
"transition-property": { "transition-property": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "all", "initial": "all",
@ -2852,7 +2852,7 @@
] ]
}, },
"transition-timing-function": { "transition-timing-function": {
"affects-layout": true, "affects-layout": false,
"animation-type": "none", "animation-type": "none",
"inherited": false, "inherited": false,
"initial": "ease", "initial": "ease",