mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 15:07:45 +00:00
LibWeb: Only invalidate stacking context tree for opacity/z-index change
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:
parent
59afdb959f
commit
8c88ee1165
6 changed files with 54 additions and 0 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue