1715231 - Firefox downloads image with larger size than defined in srcset

Status: UNCONFIRMED

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

Description

[Lyubomir [:mystiquewolf]]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

1. Have Firefox window resized with width less than 500px.
2. Have Firefox DevTools (network tab) opened in another separate window.
3. Check "Disable Cache" in the Firefox DevTools
4. Load https://liubomirwm.gitlab.io/mozilla-splash-page/

Actual results:

Firefox downloads mozilla-dinosaur-head-400w.png.

Expected results:

Firefox should've downloaded mozilla-dinosaur-head-120w.png

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 2

[Mirko Brodesser (:mbrodesser) -- not reading bugmails currently]

(In reply to Lyubomir from comment #0)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

1. Have Firefox window resized with width less than 500px.

Are you sure you could reduce the width so much? On my machine I could reduce it to roughly 500px, but for sure not less than 420px.

2. Have Firefox DevTools (network tab) opened in another separate window.
3. Check "Disable Cache" in the Firefox DevTools
4. Load https://liubomirwm.gitlab.io/mozilla-splash-page/

Actual results:

Firefox downloads mozilla-dinosaur-head-400w.png.

Expected results:

Firefox should've downloaded mozilla-dinosaur-head-120w.png

With the minimal width possible on my machine, also <mozilla-dinosaur-head-400w.png> was downloaded.
The same happened on Chrome.

Hiro: any clue if this is intended? Please feel also free to set the priority and severity for this ticket.

Comment 3

[Lyubomir [:mystiquewolf]]

I use https://www.rapidtables.com/web/tools/window-size.html to check the width
Firefox reduces to 450 x 728
Chrome reduces to 492 x 459

Although Chrome is wider, it still downloads the 120w image.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Hey Lyubomir, thanks for filing the bug. I also see the issue on my Linux box with a profile for test purpose, that said, in the profile I set the Default zoom value to 150%, are you also specifying the default zoom value? Or you are specifying hiDPI mode on your linux box?

Comment 5

[Lyubomir [:mystiquewolf]]

I have set scaling to 125% inside KDE's "System Settings" -> "Display Configuration". I am also using Wayland with MOZ_ENABLE_WAYLAND=1.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Thanks!

So, this is due to this comment in ResponsiveImageSelector::SelectImage;

  // Per spec, "In a UA-specific manner, choose one image source"               
  // - For now, select the lowest density greater than displayDensity, otherwise
  //   the greatest density available

I am not sure whether the spec has been updated to make the case clear since then. I'd defer it to DOM team. (CCing Edgar who might be the right person I can think of)

Comment 7

[Edgar Chen [:edgar]]

Per https://html.spec.whatwg.org/multipage/images.html#select-an-image-source, it is still not clear defined in the spec.

5. In a user agent-specific manner, choose one image source from source set. Let this be selected source.