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.

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