1915010 - backdrop-filter: saturate values other than 100% cause text not to render in some circumstances

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[PikeUK]

Attachment: Saturate Non-100% Testcase (shows 2 lines of text in Chrome & Edge, only 1 line of text in Firefox)

The site https://deathpitch.com/ doesn't support Firefox, it appears they've added the message because certain buttons don't render on some pages in Firefox.

I reduced the code down to the attached testcase. The relevant part is as follows:

<div style="filter: drop-shadow(1px 1px)">
    <div style="position: absolute; width: 100%; height: 100%; backdrop-filter: saturate(99%)"></div>
    <div style="position: relative">
        Saturate: 99%
    </div>
</div>

On Edge 128 and Chrome 128 the testcase will show two lines of text but on Firefox 130b9/131a1 only the second line is shown. The only difference between the two lines is that the first one uses backdrop-filter: saturate(99%) and the second uses backdrop-filter: saturate(100%). Any value other than 100% causes the line of text to disappear in Firefox. The issue still occurs if the filter on the outer div is changed to a blur or a drop-shadow but not if it's removed or changed to a different filter (of the others I tried at least).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:bhood, could you have a look please?

For more information, please visit BugBot documentation.