fix: update modal transform styles to fix IE 11 rendering issue

boltdesignsystem · Jul 30, 2019 · 0f507d4 · 0f507d4
1 parent 302b164
commit 0f507d4
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/packages/components/bolt-modal/src/modal.scss b/packages/components/bolt-modal/src/modal.scss
@@ -224,16 +224,19 @@ bolt-modal:not([ready]) {
   }
 }
 
-// Container
+/**
+  * Modal Container
+  * 1. translate3d(0, 0, 0) is needed to fix http://vjira2:8080/browse/BDS-1672?filter=-1
+**/
 .c-bolt-modal__container {
   display: block;
   opacity: bolt-opacity(0);
-  transform: scale($bolt-modal-animation-scale);
+  transform: translate3d(0, 0, 0) scale($bolt-modal-animation-scale); /* [1] */
   transition: opacity $bolt-modal-transition, transform $bolt-modal-transition;
 
   @at-root .c-bolt-modal.is-open #{&} {
     opacity: bolt-opacity(100);
-    transform: scale(1);
+    transform: translate3d(0, 0, 0) scale(1); /* [1] */
   }
 
   @include bolt-mq($bolt-modal-breakpoint) {