From ab415d64061d21dd01a27cb983b974f343f54ba2 Mon Sep 17 00:00:00 2001
From: Albert Gasset <albertgasset@fsfe.org>
Date: Tue, 10 Jul 2018 16:48:52 +0200
Subject: [PATCH] MOBILE-2433 core: Fix iframes in fullscreen mode

---
 src/app/app.scss                      | 17 +++++++++++++++++
 src/components/ion-tabs/ion-tabs.scss |  4 +++-
 2 files changed, 20 insertions(+), 1 deletion(-)

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 {