diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index dc5d4bc74c..7a96af036e 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -29,6 +29,7 @@ }, "backdrop-filter": { "affects-layout": false, + "affects-stacking-context": true, "inherited": false, "initial": "none", "valid-types": [ diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index a555d5e3c9..951d11578c 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -117,6 +117,13 @@ bool Node::establishes_stacking_context() const if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value()) return true; + // https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation + // A computed value of other than none results in the creation of both a stacking context [CSS21] and a Containing Block for absolute and fixed position descendants, + // unless the element it applies to is a document root element in the current browsing context. + // Spec Note: This rule works in the same way as for the filter property. + if (!computed_values().backdrop_filter().is_none()) + return true; + return computed_values().opacity() < 1.0f; }