Opacity doesn't get applied to root background
Categories
(Core :: Web Painting, defect)
Tracking
()
People
(Reporter: croquenbouche, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Steps to reproduce:
- Create a background-image CSS animation with opacity transitions on Firefox Desktop.
- Observe that the image fades completely to white before transitioning to the next one, rather than smoothly fading between background images.
- This issue occurs only in Firefox, and it does not occur in other browsers such as Chrome or Edge.
Actual results:
The background image fades to white completely before transitioning to the next image, instead of smoothly fading between the images.
Expected results:
The background images should smoothly fade between each other without fading to white.
Comment 1•29 days ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Transitions and Animations' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Comment 2•29 days ago
|
||
- Type "about:support" in Firefox and copy-paste its contents here
- Share a testcase which reproduces this issue for you
- If this used to work in an earlier version of Firefox, please do a bisection to find the exact change that caused this (https://mozilla.github.io/mozregression/)
Reporter | ||
Comment 3•29 days ago
|
||
Thank you for your prompt response. Here's an update with additional details:
Application Basics
Name: Firefox
Version: 134.0.1
Build ID: 20250113121357
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0
OS: Windows_NT 10.0 22631
Profiles: Default (C:\Users***\AppData\Roaming\Mozilla\Firefox\Profiles\1q1cjl01.default-release)
Testcase which reproduces this issue
Desktop (Windows 11)
- Chrome (latest version) → Works as expected
- Edge (latest version) → Works as expected
- Opera (latest version) → Works as expected
- Vivaldi (latest version) → Works as expected
- Firefox (latest version) → Problem occurs
Mobile (iPhone, iOS 17.6.1)
- Safari (latest version) → Works as expected
- Chrome (latest version) → Works as expected
- Firefox (latest version) → Works as expected
Key Observation
The issue occurs only on Firefox Desktop (Windows 11). Even Firefox for iPhone does not exhibit the same behavior. This suggests that the problem is likely specific to the desktop implementation of Firefox.
I have also shared:
- Three testcase links 1, 2, 3 to demonstrate the issue.
- A workaround link that uses JavaScript to bypass the issue.
Please let me know if further clarification or additional testing is needed. Thank you for looking into this!
Comment 4•26 days ago
|
||
All browsers on iPhone use WebKit, so that's indeed not using the same code.
That said: I think test-case 1 is invalid. Backgrounds are supposed to go from the <body>
to the root element, but opacity
isn't.
However, I do think there's a bug here, and it is as trivial as opacity
on the root not getting applied to its background image:
data:text/html,<html style="background-image: url(https://wpt.live/images/green.png); opacity: .5">
Shows the issue clearly.
Comment 5•26 days ago
|
||
Ah, we have bug 1883966 on file for this.
Reporter | ||
Comment 6•26 days ago
|
||
Thanks, this bug: 1942417 is DUPLICATE, and Should I just track this bug: 1883966 (unresolved) from now on?
Comment 7•26 days ago
|
||
Yes
Description
•