Temporary fix for Chrome's problem with rendering mask images

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Sep 20, 2024 · f285375 · f285375
1 parent a6c3ca9
commit f285375
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
@@ -120,8 +120,10 @@
 
   @if ($direction == 'y') {
     mask-image: linear-gradient(to bottom, #{$gradient});
+    contain: paint;
   } @else if ($direction == 'x') {
     mask-image: linear-gradient(to right, #{$gradient});
+    contain: paint;
   } @else {
     @warn "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
   }

diff --git a/src/themes/oui-next/global_styling/mixins/_shadow.scss b/src/themes/oui-next/global_styling/mixins/_shadow.scss
@@ -120,8 +120,10 @@
 
   @if ($direction == 'y') {
     mask-image: linear-gradient(to bottom, #{$gradient});
+    contain: paint;
   } @else if ($direction == 'x') {
     mask-image: linear-gradient(to right, #{$gradient});
+    contain: paint;
   } @else {
     @warn "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
   }

diff --git a/src/themes/v9/global_styling/mixins/_shadow.scss b/src/themes/v9/global_styling/mixins/_shadow.scss
@@ -120,8 +120,10 @@
 
   @if ($direction == 'y') {
     mask-image: linear-gradient(to bottom, #{$gradient});
+    contain: paint;
   } @else if ($direction == 'x') {
     mask-image: linear-gradient(to right, #{$gradient});
+    contain: paint;
   } @else {
     @warn "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
   }