RESOLVED FIXED 236470
`contain:content` breaks fullscreen
https://bugs.webkit.org/show_bug.cgi?id=236470
Summary `contain:content` breaks fullscreen
Simon Fraser (smfr)
Reported 2022-02-10 16:09:43 PST
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.
Attachments
Simple testcase (1.10 KB, text/html)
2022-02-10 16:17 PST, Simon Fraser (smfr)
no flags
Patch (4.82 KB, patch)
2022-02-11 09:34 PST, zalan
no flags
Simon Fraser (smfr)
Comment 1 2022-02-10 16:10:34 PST
Simon Fraser (smfr)
Comment 2 2022-02-10 16:17:05 PST
Created attachment 451615 [details] Simple testcase
zalan
Comment 3 2022-02-10 21:41:33 PST
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.
zalan
Comment 4 2022-02-11 09:34:06 PST
EWS
Comment 5 2022-02-11 17:54:10 PST
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].
Note You need to log in before you can comment on or make changes to this bug.