1759680 - [Experiment] The "Heart" animation has white edges when the browser's "Dark" theme is enabled.

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Marius Coman [:mcoman], Ecosystem QA]

Attachment: rec of the issue.gif

[Affected versions]:

• Firefox Release 98.0.1 - Build ID: 20220313140707

[Affected Platforms]:

• Windows 10 x64
• macOS 11.6.2

[Prerequisites]:

• Have a new Fireofox profile with the following prefs in the "about:config" page:
  • "nimbus.debug" set to "true";
• Firefox is not pinned to the taskbar/dock.
• Have the "Dark" theme enabled from about:addons>Themes>Dark.

[Steps to reproduce]:

1. Open the browser using the profile from the prerequisites.
2. Navigate to "about:studies?optin_slug=welcome-back-casual-eco2203&optin_branch=treatment-b&optin_collection=nimbus-preview".
3. Restart the browser and observe the "Heart" animation.

[Expected result]:

• There animation is correctly displayed and rendered.

[Actual result]:

• The "Heart" animation has white edges.

[Additional Notes]:

• Attached a screen recording of the issue:

Comment 1

[Victoria Wang [:victoria]]

Yes, this is a known design issue since we needed to use an animated transparent gif with no alpha channels (didn't have a pure SVG option ready to go). The new image I created lessens the jagged look somewhat, and if we scale the heart down to 70px wide as I've requested, that should help a lot.

Comment 2

[Ed Lee :Mardak]

The logo is now configured to be 70px instead of 115px, so that should reduce the visibility of edges. The new image from bug 1759679 should help too.

Comment 3

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible with the latest Firefox Release (98.0.1 Build ID - 20220315185755) installed on Windows 10 x64 and macOS 11.6.4. Now the logo edges are less visible.