Closed Bug 1942417 Opened 29 days ago Closed 26 days ago

Opacity doesn't get applied to root background

Categories

(Core :: Web Painting, defect)

Firefox 134
defect

Tracking

()

RESOLVED DUPLICATE of bug 1883966

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:

  1. Create a background-image CSS animation with opacity transitions on Firefox Desktop.
  2. Observe that the image fades completely to white before transitioning to the next one, rather than smoothly fading between background images.
  3. 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.

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.

Component: Untriaged → CSS Transitions and Animations
Product: Firefox → Core
  1. Type "about:support" in Firefox and copy-paste its contents here
  2. Share a testcase which reproduces this issue for you
  3. 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/)
Flags: needinfo?(croquenbouche)

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!

Flags: needinfo?(croquenbouche)

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.

Status: UNCONFIRMED → NEW
Component: CSS Transitions and Animations → Web Painting
Ever confirmed: true
Summary: Opacity transition does not work properly with background-image transitions in Firefox Desktop → Opacity doesn't get applied to root background

Ah, we have bug 1883966 on file for this.

Status: NEW → RESOLVED
Closed: 26 days ago
Duplicate of bug: 1883966
Resolution: --- → DUPLICATE

Thanks, this bug: 1942417 is DUPLICATE, and Should I just track this bug: 1883966 (unresolved) from now on?

You need to log in before you can comment on or make changes to this bug.