EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
main
Albert Gasset 2019-07-31 11:21:56 +02:00
parent 05bdd26a53
commit 603ab4e5ac
6 changed files with 8 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/addon/messages/pages/discussion/discussion.scss
View File

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

1
src/addon/mod/lesson/pages/player/player.scss
View File

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

31
src/app/app.scss
View File

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

3
src/components/ion-tabs/ion-tabs.scss
View File

@ -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 {

1
src/components/tabs/tabs.scss
View File

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

6
src/core/block/components/course-blocks/course-blocks.scss
View File

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