UI Bug in Discover Page

OpenSearch Dashboards
1

Versions (OpenSearch/Dashboard/Server OS/Browser):
Opensearch-2.12.0
Dashboard-2.12.0
RHEL-8.8
Microsoft Edge-128.0.2739.67

The issue:
A red container appears on Discover tab’s eui Panel, I found that the problem is
webkit-mask-image and mask-image in .eui-xScrollWithShadows here:

.eui-xScrollWithShadows {
    scrollbar-width: thin;
    overflow-x: auto;
    webkit-mask-image: linear-gradient(to right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); 
    mask-image: linear-gradient(to right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); 
}

I can manually disable them in browser’s Inspect tab but when I comment out them in opensearch-dashboard-2.12.0/node_modules/@osd/ui-shared-deps/target/osd-ui-shared-deps.v8.light.css , it does not apply after restarting the service, does anybody knows a way to apply the css changes?

Screenshot:

bugss
bugss1695×906 45.5 KB

2

I would recommend upgrading to 2.17.1 as the bug is fixed in that version, otherwise you can take a look at the commit that fixed this issue: Temporary fix for a bug with Chrome 129 when handling mask-image by AMoo-Miki · Pull Request #8274 · opensearch-project/OpenSearch-Dashboards · GitHub

I’d say to correctly apply your own local fix you would need to build from source.