Open Bug 1816504 Opened 2 years ago Updated 1 year ago

Bad flicker on LastEnergy.com

Categories

(Core :: Graphics: ImageLib, defect, P2)

Desktop
All
defect

Tracking

()

Tracking Status
firefox-esr102 --- affected
firefox110 --- wontfix
firefox111 --- wontfix
firefox112 --- wontfix

People

(Reporter: ekr, Assigned: tnikkel)

References

(Blocks 2 open bugs, Regression, )

Details

(Keywords: regression)

Attachments

(2 files)

STR:

  1. Go to https://www.lastenergy.com/technology
  2. Scroll downward

Expected Behavior: No flicker

Actual behavior: Very bad flicker

This works fine with Chrome.

Works fine when I enable image.decode-sync.enabled in about:config. Interestingly, setting the decoding hint doesn't make the flicker go away. I wonder if that has something do with this being a Lottie/svg animation?

document.querySelectorAll("img,image").forEach(img=>img.decoding="sync");
Component: General → Graphics: ImageLib

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=f608a5a5d8e2472396a0f4cd04778730866b8ae0&tochange=c61b11debf423499104a9c547590850f63a56fa4

Setting image.decode-sync.enabled to true seems to fix the issue on Nightly111.0a1 Windows10.

Keywords: regression
OS: macOS → All
Regressed by: 1341881
Hardware: ARM64 → Desktop
Blocks: 1801052

:tnikkel, since you are the author of the regressor, bug 1341881, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Flags: needinfo?(tnikkel)

(In reply to Gregory Pappas [:gregp] from comment #2)

Works fine when I enable image.decode-sync.enabled in about:config. Interestingly, setting the decoding hint doesn't make the flicker go away. I wonder if that has something do with this being a Lottie/svg animation?

document.querySelectorAll("img,image").forEach(img=>img.decoding="sync");

Ah, so the reason the decoding=sync isn't working is because the image elements that are there on page load are actually inside the <defs> section of the contained svg. The image element that actually displays the image to the screen looks to be created dynamically as we scroll down. So these elements would need the decoding sync attr set on them at creation time.

Thanks for everybody's investigation and tagging of bugs here. I plan to work on this as part of bug 1801052 soon.

Flags: needinfo?(tnikkel)

Reduced test case: https://gregorypappas.github.io/misc/bugs/1816504/reduced.html

I wanted to upload it directly to BMO. Sadly, this Lottie animation is a 22 megabyte file, which is above the limit.

Edit: I hacked together a smaller version that will fit inside BMO.

Attached file reduced.html (deleted) —
Severity: -- → S2
Priority: -- → P2

Set release status flags based on info from the regressing bug 1341881

Blocks: lottie
Assignee: nobody → tnikkel
Duplicate of this bug: 1826698
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: