From 3792584f9e92f22d9707d6849a4cff4d8f1f7314 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
<98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 20 Sep 2024 17:23:23 -0700
Subject: [PATCH] Temporary fix for a bug with Chrome 129 when handling
mask-image (#8274) (#8278)
* Temporary fix for a bug with Chrome 129 when handling mask-image
* Changeset file for PR #8274 created/updated
---------
(cherry picked from commit cd6a9095f20b4d8c1664e02609ed985a4aae83b3)
Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
changelogs/fragments/8274.yml | 2 ++
src/core/public/styles/_base.scss | 28 ++++++++++++++++++++++++++++
2 files changed, 30 insertions(+)
create mode 100644 changelogs/fragments/8274.yml
diff --git a/changelogs/fragments/8274.yml b/changelogs/fragments/8274.yml
new file mode 100644
index 000000000000..a8f25a5bd512
--- /dev/null
+++ b/changelogs/fragments/8274.yml
@@ -0,0 +1,2 @@
+fix:
+- Add a temporary fix for a bug with Chrome 129 when handling mask-image ([#8274](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8274))
\ No newline at end of file
diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss
index 24e3bfb8a590..e3b92e861449 100644
--- a/src/core/public/styles/_base.scss
+++ b/src/core/public/styles/_base.scss
@@ -63,3 +63,31 @@ $euiCollapsibleNavWidth: $euiSize * 20;
height: auto;
width: auto;
}
+
+// Temporary fix for a bug with Chrome 129 when handling mask-image
+// OUI provides the mask-image used in these which Chrome 129 fails to render correctly.
+// It is not known if or when Chrome will fix this. Since almost all of these classes
+// are applied to elements with scrollbars where their content contained, containing the
+// paint is a safe solution.
+// This can be achieved with various tricks like transform: translate?(0) or
+// transform-style: preserve-3d but they add to the browsers workload; contain doesn't.
+// ToDo: Remove these when most used versions of Chrome no longer suffer from the bug.
+// From OUI: any ruleset containing mask-image
+.eui-yScrollWithShadows,
+.eui-xScrollWithShadows,
+.euiYScrollWithShadows,
+.euiDataGrid__controlScroll,
+.euiDataGridColumnSelector__columnList,
+.euiDataGridColumnSorting__fieldList,
+.euiFlyoutBody .euiFlyoutBody__overflow,
+.euiFlyoutBody .euiFlyoutBody__overflow.euiFlyoutBody__overflow--hasBanner,
+.euiModalBody .euiModalBody__overflow,
+.euiSelectableList__list,
+// For OSD: consumers of eui?ScrollWithShadows
+.osdQueryBar__textarea:not(:focus):not(:invalid),
+.osdSavedQueryManagement__list,
+.dscCanvas,
+.vbConfig,
+.vbSidenav__style {
+ contain: paint;
+}