1718366 - Slight flicker when switching between images on Smugmug

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Justin Peter]

Attachment: about:support

(Not entirely sure which component to put this in - feel free to move it if I'm wrong.)

In a Smugmug gallery, switching between images in a gallery shows a brief flicker of white (or whatever the background color is) before displaying the next image.

(NB: the page linked below is not the same one I initially observed this issue on, but one linked from the main Smugmug website for privacy reasons. The issue exhibited is the same.)

STR:

1. Go to https://cmac.smugmug.com/Photography/The-mushrooms-of-my-front-yard/i-p48rkFM/A and wait a second or two for the page to load
2. Use the right arrow key to move to the next image
3. Notice a flicker of white before the next image displays

This does not reproduce in Edge. It is also not a network issue, as Smugmug appears to load the next image ahead of time. Interestingly (perhaps), after going forward going back to the previous image and going forward again displays no flicker (you can navigate between the last few images you viewed smoothly).

This occurs on the latest nightly. About:support is attached, I will take and put a profile in the next comment.

Comment 1

[Justin Peter]

Profile: https://share.firefox.dev/3A282ic

Comment 2

[Jim Mathies [:jimm]]

Doesn't happen in Chrome, and I can reproduce in Nightly.

Comment 3

[Timothy Nikkel (:tnikkel)]

Looks like they just insert the img into the dom, the site could use decoding="sync" or image.decode to avoid this.

Comment 4

[Jim Mathies [:jimm]]

Emilio, any ideas here? We seem to be handling this worse than Chrome.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

As Tim said, we decode images async by default, but provide ways for authors to override this behavior. If the page used decoding=sync we should behave just like Chrome...

If we don't want to do outreach, we might want to do something like sync-decoding iff the image is "big enough" and in the viewport, or something like that? But it'd mostly be an heuristic.

Comment 6

[Justin Peter]

I emailed their support a couple weeks ago and they said they had reproduced the issue and were looking into it (although I haven't heard back since); I'll post any updates on this bug.

Comment 7

[Justin Peter]

I have followed up with the website again; there does not seem to have been any change.

Comment 8

[Justin Peter]

I'm not sure if it's the same root cause, but I noticed today that the same thing happens (but with a black flicker) when looking through an album on Facebook. (I can't think of any good pages off the top of my head that I'm comfortable linking to publicly, but basically click on a picture in any post with several pictures and click the right arrow key; it's the same steps as the first post.)

Comment 9

[Gregory Pappas [:gregp]]

By default, Firefox decodes images asynchronously; Chromium does not. Smugmug could be depending on engine-specific behavior. Smugmug can use the decoding attribute to control this behavior.

Comment 10

[Sky Schubert [:skyschub]]

ni? myself for outreach there.

Comment 11

[Sky Schubert [:skyschub]]

I've sent an email to a contact I think I still have.

Comment 12

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1718366 - add a CSS webcompat intervention for smugmug.com to prevent image flickering; r?ksenia

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3ccf0d0d9f9d
https://hg.mozilla.org/integration/autoland/rev/bf26cc53802a
add a CSS webcompat intervention for smugmug.com to prevent image flickering; r=ksenia,webcompat-reviewers

Comment 14

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/bf26cc53802a