From 603ab4e5acdfaf58045d5b2bc30a3e82317ebcae Mon Sep 17 00:00:00 2001 From: Albert Gasset Date: Wed, 31 Jul 2019 11:21:56 +0200 Subject: [PATCH] MOBILE-3042 styles: Disable all CSS contianment rules 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. --- .../messages/pages/discussion/discussion.scss | 1 - src/addon/mod/lesson/pages/player/player.scss | 1 - src/app/app.scss | 31 +++++-------------- src/components/ion-tabs/ion-tabs.scss | 3 -- src/components/tabs/tabs.scss | 1 - .../course-blocks/course-blocks.scss | 6 ---- 6 files changed, 8 insertions(+), 35 deletions(-) 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; } } }