Making Template preview on safari great again (ampproject#193)

israelcefrin · Mar 3, 2017 · 00eb527 · 00eb527
1 parent 5dd90e4
commit 00eb527
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/components/lightbox/template-preview.css b/components/lightbox/template-preview.css
@@ -39,14 +39,15 @@
 .ampstart-mobile-frame,
 .ampstart-tablet-frame,
 .ampstart-desktop-frame {
-  visibility: hidden;
+  opacity: 0;
 }
 
 
 [option="mobile"][selected] + .ampstart-mobile-frame,
 [option="tablet"][selected] + .ampstart-tablet-frame,
 [option="desktop"][selected] + .ampstart-desktop-frame {
-  visibility: visible;
+  opacity: 1;
+  z-index: var(--zindex-max);
 }
 
 .ampstart-mobile-frame amp-iframe {
@@ -167,12 +168,13 @@
   .ampstart-mobile-frame,
   [option="mobile"][selected] + .ampstart-mobile-frame,
   [option="tablet"][selected] + .ampstart-tablet-frame {
-    visibility: hidden;
+    opacity: 0;
   }
 
   .ampstart-desktop-frame,
   [option="desktop"][selected] + .ampstart-desktop-frame {
-    visibility: visible;
+    opacity: 1;
+    z-index: var(--zindex-max);
   }
 
   .ampstart-device-preview [option] {