1997958 - Elements with opacity < 1 not showing correctly

Status: UNCONFIRMED

(Core :: Graphics, defect, P3)

Description

[Ryan]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0

Steps to reproduce:

Example 1:
Created parent element with opacity < 1.
Created a child element with a background color.
Entered Responsive Design Mode.
Resized the emulated device with.

Example 2:
Create parent element with background image.
Create child element with opacity < 1.

Notes:
I tried to take screenshots of the bug with both Windows snipping tool and Firefox's built in tool, but when looking at the results, they were all correct and did not reflect what was actually showing on screen. I took a video of my screen https://vimeo.com/1133179285/7561273e86

These bugs can be a triggered a few different ways, but when they happen, they are consistently repeatable.

Actual results:

Example 1:
When the element is below certain width, the color tone of the semi-transparent child element changes (not due to any @media or container query style declarations and confirmed by checking it other browsers).

Example 2:
Background image of parent element is not visible at all.

Expected results:

Example 1:
No change in color tone regardless of the width of the window or elements.

Example 2:
Background image of parent element should be partially visible depending on the child's opacity.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[BugBot [:suhaib / :marco]]

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

For more information, please visit BugBot documentation.

Comment 3

[C.M.Chang[:chunmin]]

(In reply to Ryan from comment #0)
Does this only happen in Responsive Design Mode or on certain device/screen? Is it possible to have a simple test page? (AI-created page is fine as long as it shows the problem)

This looks like a gfx issue for me, so I am going to move the component

Comment 4

[C.M.Chang[:chunmin]]

Attachment: opacity-1997958-by-chatgpt.html

Hi Ryan, can you check if this test page demonstrates the issue you found (The test page is generated by chatgpt)?

Comment 5

[Ryan]

Sorry for the delayed response. I've been traveling. In fact I still am traveling and found this doesn't happen on the device I'm currently using. This leads me to believe it's something related to Windows HDR. The device I had the issue on was Windows 11 with HDR enabled. The device I'm currently on is Windows 11 but does not support HDR. I'll have to wait until I get back to setup a test case since I can't currently reproduce it.