Bug 236470 - `contain:content` breaks fullscreen
Summary: `contain:content` breaks fullscreen
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: zalan
Keywords: InRadar
Depends on:
Reported: 2022-02-10 16:09 PST by Simon Fraser (smfr)
Modified: 2022-02-11 17:54 PST (History)
11 users (show)

See Also:

Simple testcase (1.10 KB, text/html)
2022-02-10 16:17 PST, Simon Fraser (smfr)
no flags Details
Patch (4.82 KB, patch)
2022-02-11 09:34 PST, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Fraser (smfr) 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.
Comment 1 Simon Fraser (smfr) 2022-02-10 16:10:34 PST
Comment 2 Simon Fraser (smfr) 2022-02-10 16:17:05 PST
Created attachment 451615 [details]
Simple testcase
Comment 3 zalan 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;
     transformStyleOptimized3DEnabled = true;

will submit a patch once I figured out how to test fullscreen.
Comment 4 zalan 2022-02-11 09:34:06 PST
Created attachment 451710 [details]
Comment 5 EWS 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].