From 24465c5d6c8a3c11de965f9191a6a84f1342faef Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Fri, 20 Sep 2024 12:27:28 -0700
Subject: [PATCH] Temporary fix for Chrome's problem with rendering mask images

Signed-off-by: Miki <miki@amazon.com>
---
 CHANGELOG.md                                  | 36 ++++++++++++++++---
 src/global_styling/mixins/_shadow.scss        |  2 ++
 .../global_styling/mixins/_shadow.scss        |  2 ++
 .../v9/global_styling/mixins/_shadow.scss     |  2 ++
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bac992e6..a5551b9cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,10 +4,38 @@
 
 ### Deprecations
 
+
+### 🛡 Security
+
+
+### 📈 Features/Enhancements
+
+
+### 🐛 Bug Fixes
+
+-  Add Temporary fix for Chrome's problem with rendering mask images ([#1414](https://github.com/opensearch-project/oui/pull/1414))
+
+### 🚞 Infrastructure
+
+
+### 📝 Documentation
+
+
+### 🛠 Maintenance
+
+
+### 🪛 Refactoring
+
+
+### 🔩 Tests
+
+## [`1.13.0`](https://github.com/opensearch-project/oui/tree/1.13)
+
+### Deprecations
+
 - Deprecate `aria-label` and `data-test-subj` of OuiSearchBar which have never been consumed despite being defined ([#1381](https://github.com/opensearch-project/oui/pull/1381))
 - Deprecate the unexported `OuiBreadcrumbsSimplified` ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
-
 ### 🛡 Security
 
 - [CVE-2024-39338] Bumps `axios` from 1.6.2 to 1.7.4 ([#1357](https://github.com/opensearch-project/oui/pull/1357))
@@ -19,6 +47,8 @@
 - Expand the definitions of `$ouiBreakpoints` to include `xxl` and `xxxl` ([#1387](https://github.com/opensearch-project/oui/pull/1387))
 - Remove scaling of heading elements ([#1389](https://github.com/opensearch-project/oui/pull/1389))
 - Make the space between search bar and table rows match the compressed state of the search box ([#1391](https://github.com/opensearch-project/oui/pull/1391))
+- Update primary color for the v9 light theme ([#1398](https://github.com/opensearch-project/oui/pull/1398))
+- Update colors for the v9 theme ([#1402](https://github.com/opensearch-project/oui/pull/1402))
 - Add CSS breakpoints to OuiBreakpointSize ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 - Allow limiting the allowed breakpoints when calling `getBreakpoint()` ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 - Adjust number of responsive breadcrumbs shown per breakpoint ([#1401](https://github.com/opensearch-project/oui/pull/1401))
@@ -34,8 +64,6 @@
 - Display the last breadcrumb in a nested breadcrumb as a normal breadcrumb ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 - Limit allowed breakpoints to those provided by the `responsive` prop of Oui*Breadcrumbs ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
-### 🚞 Infrastructure
-
 ### 📝 Documentation
 
 - Add a playground for OuiDatePicker ([#1380](https://github.com/opensearch-project/oui/pull/1380))
@@ -49,8 +77,6 @@
 
 - Refactor OuiSimplifiedBreadcrumbs into its own folder ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
-### 🔩 Tests
-
 
 ## [`1.12.0`](https://github.com/opensearch-project/oui/tree/1.12)
 
diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
index a781f30ce..4d07efcca 100644
--- 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
index 3fc60fa09..6e6ea3633 100644
--- 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
index 3fc60fa09..6e6ea3633 100644
--- 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}'";
   }