From d776d8c8a4c43a16abdaa734f2066f83be88e00e Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Wed, 8 May 2024 13:39:09 -0700 Subject: [PATCH] Make it so that a view with a filter forms a stacking context and containing block (#44456) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44456 Self explanatory: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context#description and https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D55044674 fbshipit-source-id: fcc3b04f5b1d5dd11b8e9e15b3c5bdbf9b609f7c --- .../react/renderer/components/view/ViewShadowNode.cpp | 1 + .../renderer/components/view/YogaLayoutableShadowNode.cpp | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp index 636b1f0b221..666702d1625 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp @@ -61,6 +61,7 @@ void ViewShadowNode::initialize() noexcept { viewProps.accessibilityViewIsModal || viewProps.importantForAccessibility != ImportantForAccessibility::Auto || viewProps.removeClippedSubviews || viewProps.cursor != Cursor::Auto || + !viewProps.filter.empty() || HostPlatformViewTraitsInitializer::formsStackingContext(viewProps); bool formsView = formsStackingContext || diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp index f296208d221..5c0c97e305c 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp @@ -376,8 +376,11 @@ void YogaLayoutableShadowNode::updateYogaProps() { yogaNode_.setStyle(styleResult); if (getTraits().check(ShadowNodeTraits::ViewKind)) { auto& viewProps = static_cast(*props_); - YGNodeSetAlwaysFormsContainingBlock( - &yogaNode_, viewProps.transform != Transform::Identity()); + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + bool alwaysFormsContainingBlock = + viewProps.transform != Transform::Identity() || + !viewProps.filter.empty(); + YGNodeSetAlwaysFormsContainingBlock(&yogaNode_, alwaysFormsContainingBlock); } }