Open Bug 1756191 Opened 3 years ago Updated 3 years ago

Image load event is sometimes fired _after_ the image is painted instead of before

Categories

(Core :: DOM: Core & HTML, defect)

Firefox 99
defect

Tracking

()

UNCONFIRMED

People

(Reporter: caleb, Unassigned, NeedInfo)

References

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15

Steps to reproduce:

Here's a quick demo: these images should get larger in steps of 75, but you'll see brief flashes of larger images in Firefox. Safari and Chrome do not have the issue, and Firefox didn't used to: https://jsfiddle.net/1q0tpacu/1/

  1. <img> in the DOM
  2. Attach a load event that changes a style that only looks right on the new image but looks bad if applied to the current image
  3. Change the image source

Actual results:

Sometimes, but not every time:

  • The old image will briefly be rendered with the new style.
  • The load event fires after the image is rendered.
  • Two frames are rendered to the display (verifiable with the performance extension)

Expected results:

  • The old image should never have rendered with the new style.
  • The load event should have fired before the image was rendered.
  • Only one frame should have been rendered to the display

The Bugbug bot thinks this bug should belong to the 'WebExtensions::Untriaged' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Product: Firefox → WebExtensions
Component: Untriaged → DOM: Events
OS: Unspecified → All
Product: WebExtensions → Core
Hardware: Unspecified → All

It seems that it's a race between vsync and a call of nsImageLoadingContent::OnLoadComplete.

Smaug: do you know something about it or some other expert?

Flags: needinfo?(bugs)
Component: DOM: Events → DOM: Core & HTML

We do use render blocking priority messaging from imglib to the main thread so that images can be painted sooner.
My guess is that we're missing to use that priority for OnLoadComplete.

Per spec load event fires after
"Update req's img element's presentation appropriately." step, though animationFrame callbacks would run afterwards.

sounds this depends on bug 1076583 ?

Severity: -- → S3
You need to log in before you can comment on or make changes to this bug.