Taking the YouTube embed fullscreen on https://www.fluentu.com/blog/french/funny-french-videos/ is broken with containment enabled; you see the page content, not the video in fullscreen. CSS has: lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; } If I remove contain: content the bug does not occur. This site seems to be using https://github.com/paulirish/lite-youtube-embed, so this might be common.
<rdar://88689388>
Created attachment 451615 [details] Simple testcase
diff --git a/Source/WebCore/css/fullscreen.css b/Source/WebCore/css/fullscreen.css index c2a71ca3ceda..b67ed6ee0d01 100644 --- a/Source/WebCore/css/fullscreen.css +++ b/Source/WebCore/css/fullscreen.css @@ -48,6 +48,7 @@ perspective: none !important; -webkit-transform-style: flat !important; overflow: visible !important; + contain: none !important; } video:-webkit-full-screen, audio:-webkit-full-screen { diff --git a/Source/WebCore/css/parser/CSSParserContext.cpp b/Source/WebCore/css/parser/CSSParserContext.cpp index 55d36bb58616..f6b19755e2ea 100644 --- a/Source/WebCore/css/parser/CSSParserContext.cpp +++ b/Source/WebCore/css/parser/CSSParserContext.cpp @@ -51,6 +51,7 @@ CSSParserContext::CSSParserContext(CSSParserMode mode, const URL& baseURL) individualTransformPropertiesEnabled = true; focusVisibleEnabled = true; inputSecurityEnabled = true; + containmentEnabled = true; #if ENABLE(CSS_TRANSFORM_STYLE_OPTIMIZED_3D) transformStyleOptimized3DEnabled = true; #endif will submit a patch once I figured out how to test fullscreen.
Created attachment 451710 [details] Patch
Committed r289686 (247172@main): <https://commits.webkit.org/247172@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 451710 [details].