diff --git a/src/app/app.scss b/src/app/app.scss index a38353fc0..4158092ab 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -832,3 +832,20 @@ body.keyboard-is-open core-ion-tabs .tabbar { pointer-events: none; } } + +// 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; +} diff --git a/src/components/ion-tabs/ion-tabs.scss b/src/components/ion-tabs/ion-tabs.scss index 1cb04e2f4..d7761d706 100644 --- a/src/components/ion-tabs/ion-tabs.scss +++ b/src/components/ion-tabs/ion-tabs.scss @@ -43,7 +43,9 @@ core-ion-tabs, core-ion-tab { width: 100%; height: 100%; overflow: hidden; - contain: strict; + + // Do not use "contain: strict" so fullscreen iframes work. + contain: size layout style; } core-ion-tab {