fix: workaround fix for the PL UIKit viewport resizer width occasionally getting stuck with a width of 0px in Safari and Firefox when the JS is initially booting up

Author: bolt-bot

packages/uikit-workshop/dist/styleguide/css/pattern-lab.css

@@ -862,6 +862,7 @@
 */
 .pl-c-viewport__iframe-wrapper {
   height: 100%;
+  width: 100%;
   position: relative;
   margin: 0 auto;
   -webkit-box-flex: 1;

packages/uikit-workshop/src/sass/scss/components/_viewport.scss

@@ -13,17 +13,17 @@
 * 1) This wrapper div occupies all remaining viewport space after PL's header
 */
 .pl-c-viewport {
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	width: 100%;
-	position: relative;
-	top: $offset-top;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 0;
-	overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  top: $offset-top;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  overflow: hidden;
 }
 
 /**
@@ -32,12 +32,12 @@
 * used in JS for manual viewport resizing purposes.
 */
 .pl-c-viewport__cover {
-	width: 100%;
-	height: 100%;
-	display: none;
-	position: absolute;
-	z-index: 20;
-	cursor: move;
+  width: 100%;
+  height: 100%;
+  display: none;
+  position: absolute;
+  z-index: 20;
+  cursor: move;
 }
 
 /**
@@ -46,80 +46,81 @@
 *    iframe and the manual resize handle
 */
 .pl-c-viewport__iframe-wrapper {
-	height: 100%;
-	position: relative;
-	margin: 0 auto;
-	flex: 1;
-	-webkit-overflow-scrolling: touch;
-	overflow-y: auto;
-	overflow-x: hidden;
+  height: 100%;
+  width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in
+  position: relative;
+  margin: 0 auto;
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  overflow-x: hidden;
 
-	&.hay-mode {
-		transition: all 40s linear;
-	}
+  &.hay-mode {
+    transition: all 40s linear;
+  }
 }
 
 /**
 * Viewport iframe
 * 1) this is the actual <iframe>
 */
 .pl-c-viewport__iframe {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	border: 0;
-	padding: 0;
-	margin: 0;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: $pl-color-white;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: $pl-color-white;
 
-	/**
+  /**
     * Hay Mode transition
     * 1) Hay Mode (disabled by default) starts with the smallest
     * viewport then slowly expands http://bradfrost.com/blog/post/ish-2-0/
     */
-	&.hay-mode {
-		transition: all 40s linear;
-	}
+  &.hay-mode {
+    transition: all 40s linear;
+  }
 }
 
 /**
 * Right pull container
 * 1) Container used for manual resizing
 */
 .pl-c-viewport__resizer {
-	position: absolute;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	width: 14px;
-	margin: 0;
-	height: 100%;
-	cursor: ew-resize;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 14px;
+  margin: 0;
+  height: 100%;
+  cursor: ew-resize;
 }
 
 /**
 * Right pull
 * 1) This is the handle that lets the user resize the viewport
 */
 .pl-c-viewport__resizer-handle {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	background: $pl-color-gray-20;
-	transition: background $pl-animate-quick ease-out;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background: $pl-color-gray-20;
+  transition: background $pl-animate-quick ease-out;
 
-	&:hover {
-		background: $pl-color-gray-50;
-	}
+  &:hover {
+    background: $pl-color-gray-50;
+  }
 
-	&:active {
-		cursor: move;
-		background: $pl-color-gray-70;
-	}
+  &:active {
+    cursor: move;
+    background: $pl-color-gray-70;
+  }
 }
 
 /**
@@ -128,5 +129,5 @@
 *    transition the width of the viewport
 */
 .vp-animate {
-	transition: width 0.8s ease-out;
+  transition: width 0.8s ease-out;
 }