Temporary fix for Chrome's problem with rendering mask images (#1414) (…

…#1420) Signed-off-by: Miki <[email protected]> (cherry picked from commit 533c1ff) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 26, 2024 · 3f8266b · 3f8266b
1 parent dbaa9c8
commit 3f8266b
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}'";
  }