diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss index ddffe0900..ca1e66232 100644 --- a/src/addon/messages/pages/discussion/discussion.scss +++ b/src/addon/messages/pages/discussion/discussion.scss @@ -49,7 +49,6 @@ ion-app.app-root page-addon-messages-discussion { @include core-transition(width); // This is needed to display bubble tails. overflow: visible; - contain: none; core-format-text > p:only-child { display: inline; diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss index e1ac00eb4..cb4a4caf9 100644 --- a/src/addon/mod/lesson/pages/player/player.scss +++ b/src/addon/mod/lesson/pages/player/player.scss @@ -11,7 +11,6 @@ ion-app.app-root page-addon-mod-lesson-player { } .addon-mod_lesson-pagebuttons .button-block { - contain: content; height: 100%; display: flex; flex-direction: column; diff --git a/src/app/app.scss b/src/app/app.scss index 7123b9909..209c5bd27 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -456,11 +456,6 @@ ion-app.app-root { } } - .col > .button-block { - contain: content; - } - - // File uploader. // ------------------------- .core-fileuploader-file-handler { @@ -1069,21 +1064,14 @@ details summary { line-height: 28px; } -// Fix iframes in fullscreen mode. -// -// Ionic sets "contain: strict" to some elements. This enables paint containment, -// which changes behaviour of fixed positioned elements and seems to break iframes -// in fullscreen mode. See https://www.w3.org/TR/css-contain-1/#containment-paint -ion-app, -ion-nav, -ion-tab, -ion-tabs, -.app-root, -.ion-page, -ion-modal, -.modal-wrapper, -.split-pane { - contain: size layout style; +// Ionic sets the "contain" CSS property to some elements. This enables CSS +// containment, which changes how elements are positioned and sized, breaking +// fixed positioned elements, iframes in full screen mode, subtitle menus in +// videos and potentially more things. CSS containment is not supported in iOS +// and Android 4.4, so it can introduce inconsistencies across devices. +// See https://www.w3.org/TR/css-contain-1 +* { + contain: none !important; } // Highlight text. @@ -1108,9 +1096,6 @@ ion-app.platform-desktop { .button-block[text-wrap] { height: auto; - // Changed from "strict" because the size depends on child elements. - contain: content; - // Add vertical padding, we cannot rely on a fixed height + centering like in normal buttons. .item-md & { padding-top: .5357em; diff --git a/src/components/ion-tabs/ion-tabs.scss b/src/components/ion-tabs/ion-tabs.scss index 20875d511..8e8a0ebd3 100644 --- a/src/components/ion-tabs/ion-tabs.scss +++ b/src/components/ion-tabs/ion-tabs.scss @@ -89,9 +89,6 @@ core-ion-tabs, core-ion-tab { width: 100%; height: 100%; overflow: hidden; - - // Do not use "contain: strict" so fullscreen iframes work. - contain: size layout style; } core-ion-tab { diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 5dfa3c960..ac4b2ac54 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -102,7 +102,6 @@ ion-app.app-root core-tabs { .scroll-content { overflow: hidden !important; - contain: initial; position: relative; } } diff --git a/src/core/block/components/course-blocks/course-blocks.scss b/src/core/block/components/course-blocks/course-blocks.scss index f4a9df06a..9e51ab42b 100644 --- a/src/core/block/components/course-blocks/course-blocks.scss +++ b/src/core/block/components/course-blocks/course-blocks.scss @@ -10,12 +10,10 @@ ion-app.app-root core-block-course-blocks { &.core-no-blocks { .core-course-blocks-content > ion-content { height: auto; - contain: content; > .scroll-content { overflow-y: visible; position: relative; - contain: content; } } } @@ -31,8 +29,6 @@ ion-app.app-root core-block-course-blocks { flex-direction: row; flex-wrap: nowrap; - contain: strict; - .core-course-blocks-content { min-width: calc(100% - #{($core-side-blocks-max-width)}); max-width: calc(100% - #{($core-side-blocks-min-width)}); @@ -57,7 +53,6 @@ ion-app.app-root core-block-course-blocks { .core-course-blocks-content > ion-content, ion-content.core-course-blocks-side { height: auto; - contain: content; &.core-hide-blocks { display: none; @@ -66,7 +61,6 @@ ion-app.app-root core-block-course-blocks { > .scroll-content { overflow-y: visible; position: relative; - contain: content; } } }