Merge pull request #2030 from albertgasset/MOBILE-3042

MOBILE-3042 styles: Disable all CSS contianment rules

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;

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;

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 the "contain" CSS property to some elements. This enables CSS
-//
+// containment, which changes how elements are positioned and sized, breaking
-// Ionic sets "contain: strict" to some elements. This enables paint containment,
+// fixed positioned elements, iframes in full screen mode, subtitle menus in
-// which changes behaviour of fixed positioned elements and seems to break iframes
+// videos and potentially more things. CSS containment is not supported in iOS
-// in fullscreen mode. See https://www.w3.org/TR/css-contain-1/#containment-paint
+// and Android 4.4, so it can introduce inconsistencies across devices.
-ion-app,
+// See https://www.w3.org/TR/css-contain-1
-ion-nav,
+* {
-ion-tab,
+  contain: none !important;
-ion-tabs,
-.app-root,
-.ion-page,
-ion-modal,
-.modal-wrapper,
-.split-pane {
-  contain: size layout style;
 }
 
 // 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;

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 {

src/components/tabs/tabs.scss

@@ -102,7 +102,6 @@ ion-app.app-root core-tabs {
 
             .scroll-content {
                 overflow: hidden !important;
-                contain: initial;
                 position: relative;
             }
         }

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;
                 }
             }
         }