[BUG] Google Chrome v129 Discover screen - CSS class eui-xScrollWithShadows placing a big red layer over all the logs details

[rcaferraz]

Describe the bug

After updating Google Chrome to the version 129.x I started to see a red layer over the log details in the discover screen.

To Reproduce
Steps to reproduce the behavior:

1. Open Google Chrome version 129.x
2. Go to Discover screen to show some log events
3. At the top of the screen, as usual, there will be shown the log events over a time line, and below that, the list of log events for you to expand and see the details.
4. Click at any one of those log events below the time line to expand the details.
5. See the error: there will be a big red layer over all the info that you would like to read, making the screen unusable.

Expected behavior
There shouldn't be any red layer over the details of the logs.

OpenSearch Version
Not sure

Dashboards Version
v2.11.0

Plugins
Not sure if we have any

Screenshots

If applicable, add screenshots to help explain your problem.

Host/Environment (please complete the following information):

• OS: Microsoft Windows 11 Pro 23H2
• Browser and version: Google Chrome v129.0.6668.59 64 bits

Additional context
The problem seems to be related to the CSS class eui-xScrollWithShadows as shown in the second image above.

[rcaferraz]

By the way, if you need a workaround for that, you can paste the code below on your Chrome Dev Tools console. The red layer will turn into a colorful transparent gradient (I didn't find a way to remove it entirely):

(function(){
    let style = `<style>
.eui-xScrollWithShadows{
        -webkit-mask-image: linear-gradient(to right, #f719636e, #7aff006b 100%)
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

Before pasting the code above:

After pasting the code above:

[JoSuperprof]

I experienced the same issue while using regular browsing, but it worked in private browsing. I cleared my cache and cookies, which resolved the problem.

If the issue still persists, you can remove the red mask by using the following slightly improved code from @rcaferraz (thanks to him):

(function(){
    let style = `<style>
.eui-xScrollWithShadows{
        -webkit-mask-image: unset;
    }
</style>`;

    document.head.insertAdjacentHTML("beforeend", style);
})();

[AMoo-Miki]

I reproduced this on OSD from main and Chrome 129.

[AMoo-Miki]

@rcaferraz thanks for the investigation you did. Chrome 129 and 130 have a problem with rendering of mask-image which seems to be tied to the overflow. If the overflow attributes are turned off on the parent, the mask renders correctly. I noticed others on the internet had other kinds of issues with this combination.

The cleanest solution I could come up with was to have Chrome contain the painting of the elements using mask images. This has the least impact on the browser and everything around it. Other tricks like transform: translate?(0), or transform-style: preserve-3d add work to the browser but contain: paint reduces the workload of the browser by instructing it to not bother with how the element bleeds out.

A PR is on the way.

[ashwin-pc]

I've opened an issue on the chromium channel with reproduction steps: https://issues.chromium.org/issues/368562242

[AMoo-Miki]

After digging some more, the Chrome bug manifests with a combination of nested overflows, negative margin, border-radius, position absolute, and of course the mask-image.

[rcaferraz]

Thanks a lot, folks! I'm amazed on how quick this was fixed. If it isn't asking too much, can you please let me know in which version this fix will be available? Is it in 2.17.1 (according to the label this issue received)?

[ashwin-pc]

Yes that is correct. We are working with the release team to put out a patch for this asap

[stefansundin]

Here's my workaround:

const s=document.createElement("style");
document.head.appendChild(s);
s.sheet.insertRule('.eui-xScrollWithShadows { mask-image: none !important; }');

You can create a "bookmarklet" with this URL for a simple one-click fix:

javascript:(function(){const s=document.createElement("style");document.head.appendChild(s);s.sheet.insertRule('.eui-xScrollWithShadows { mask-image: none !important; }');})();

[ashwin-pc]

Is anyone able to reproduce this issue with the legacy table?

[rlevytskyi]

With legacy view, this issue exists too.

[kinseii]

On version 2.12.0, the problem persisted on both the new Discover and Legacy. I have consistently upgraded to 2.17.0 and the problem on the Legacy Discover is gone, it is only on the new Discover.
@ashwin-pc

[ashwin-pc]

2.17.1 that was ju7st released shoud fix it for both tables :)

[kinseii]

Yes! It works in 2.17.1! Thanx a lot!

[ssantichaivekin]

My company is using AWS OpenSearch Service and AWS told us they won't pick up this update until Oct 25.

We added the following to our Chrome Extension and set it to run when we open any OpenSearch dashboard sites:

(function () {
    setTimeout(() => {
        let style = `<style>
.eui-xScrollWithShadows{
        -webkit-mask-image: unset;
    }
</style>`;

        document.head.insertAdjacentHTML("beforeend", style);
    }, 3000); // wait 3 seconds before running
})();

Which fixed the issue.

Want to share this in case it's helpful to people using AWS OpenSearch Service. 😄

[Streethawk27]

@ssantichaivekin i figured out how to add the code.Thanks

[oliveirahelder]

Hey, still happening on my end!

[ashwin-pc]

@oliveirahelder which version of OpenSearch Dashboards are you running and where?

[oliveirahelder]

v 2.11.0

[LunaticoCR]

Here's my workaround:

const s=document.createElement("style");
document.head.appendChild(s);
s.sheet.insertRule('.eui-xScrollWithShadows { mask-image: none !important; }');

You can create a "bookmarklet" with this URL for a simple one-click fix:

javascript:(function(){const s=document.createElement("style");document.head.appendChild(s);s.sheet.insertRule('.eui-xScrollWithShadows { mask-image: none !important; }');})();

This is gold! Thanks @stefansundin !