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

Signed-off-by: Miki <[email protected]>

CHANGELOG.md

@@ -9,10 +9,13 @@
 
 
 ### 📈 Features/Enhancements
-- Additional borderRadius sizes on Panels ([#1417](https://github.com/opensearch-project/oui/pull/1417))
-- Configuration of borderRadius on Cards ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+
 
 ### 🐛 Bug Fixes
+
+-  Add Temporary fix for Chrome's problem with rendering mask images ([#1414](https://github.com/opensearch-project/oui/pull/1414))
+- Additional borderRadius sizes on Panels ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+- Configuration of borderRadius on Cards ([#1417](https://github.com/opensearch-project/oui/pull/1417))
 - Update components to respect new breakpoints ([#1416])(https://github.com/opensearch-project/oui/pull/1416)
 
 ### 🚞 Infrastructure
@@ -25,12 +28,14 @@
 
 
 ### 🪛 Refactoring
+
+
+### 🔩 Tests
+
 - Make Side Nav variables themeable ([#1417](https://github.com/opensearch-project/oui/pull/1417))
 - Make Links use font-weight `$ouiFontWeightSemiBold` (no change for existing themes) ([#1417](https://github.com/opensearch-project/oui/pull/1417))
 - Enable themes to define background colors for Buttons ([#1417](https://github.com/opensearch-project/oui/pull/1417))
 
-### 🔩 Tests
-
 
 ## [`1.13.0`](https://github.com/opensearch-project/oui/tree/1.13)
 
@@ -39,7 +44,6 @@
 - 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))
@@ -51,6 +55,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))
@@ -66,8 +72,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))
@@ -81,8 +85,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)
 

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}'";
   }

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}'";
   }

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}'";
   }