Fix red mask style for chromium browsers (#481)

Author: asteriscos

CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 - Support for Wazuh 4.10.1
 
+### Fixed
+
+- Fix red mask style for chromium browsers [#481](https://github.com/wazuh/wazuh-dashboard/pull/481)
+
 ## Wazuh dashboard v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 08
 
 ### Changed

src/core/public/styles/_base.scss

@@ -63,3 +63,32 @@ $euiCollapsibleNavWidth: $euiSize * 20;
   height: auto;
   width: auto;
 }
+
+// THIS WAS FIXED IN OPENSEARCH DASHBOARDS 2.17.1. THIS IS A TEMPORARY FIX FOR OSD 2.16.0
+// 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 {
+  mask-image: unset;
+}