RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 15:07:45 +00:00
Code Issues Activity Actions

LibWeb: Only invalidate stacking context tree for opacity/z-index change

Browse source 
I came across some websites that change an elements CSS "opacity" in
their :hover selectors. That caused us to relayout on hover, which we'd
like to avoid.

With this patch, we now check if a property only affects the stacking
context tree, and if nothing layout-affecting has changed, we only
invalidate the stacking context tree, causing it to be rebuilt on next
paint or hit test.

This makes :hover { opacity: ... } rules much faster. :^)
This commit is contained in:
Andreas Kling 2022-03-21 10:58:51 +01:00
parent 59afdb959f
commit 8c88ee1165
6 changed files with 54 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Userland/Libraries/LibWeb/DOM/Element.cpp
View file

@ -27,6 +27,7 @@
#include <LibWeb/HTML/EventLoop/EventLoop.h>
#include <LibWeb/HTML/Parser/HTMLParser.h>
#include <LibWeb/Layout/BlockContainer.h>
#include <LibWeb/Layout/InitialContainingBlock.h>
#include <LibWeb/Layout/InlineNode.h>
#include <LibWeb/Layout/ListItemBox.h>
#include <LibWeb/Layout/TableBox.h>
@ -278,12 +279,14 @@ void Element::did_remove_attribute(FlyString const& name)
enum class RequiredInvalidation {
None,
RepaintOnly,
RebuildStackingContextTree,
Relayout,
};
static RequiredInvalidation compute_required_invalidation(CSS::StyleProperties const& old_style, CSS::StyleProperties const& new_style)
{
bool requires_repaint = false;
bool requires_stacking_context_tree_rebuild = false;
for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) {
auto property_id = static_cast<CSS::PropertyID>(i);
auto const& old_value = old_style.properties()[i];
@ -296,8 +299,12 @@ static RequiredInvalidation compute_required_invalidation(CSS::StyleProperties c
continue;
if (CSS::property_affects_layout(property_id))
return RequiredInvalidation::Relayout;
if (CSS::property_affects_stacking_context(property_id))
requires_stacking_context_tree_rebuild = true;
requires_repaint = true;
}
if (requires_stacking_context_tree_rebuild)
return RequiredInvalidation::RebuildStackingContextTree;
if (requires_repaint)
return RequiredInvalidation::RepaintOnly;
return RequiredInvalidation::None;
@ -325,6 +332,13 @@ Element::NeedsRelayout Element::recompute_style()
return NeedsRelayout::No;
}
if (required_invalidation == RequiredInvalidation::RebuildStackingContextTree && layout_node()) {
layout_node()->apply_style(*m_computed_css_values);
document().invalidate_stacking_context_tree();
layout_node()->set_needs_display();
return NeedsRelayout::No;
}
return NeedsRelayout::Yes;
}