1696392 - the media query doesn't work on preload

Status: RESOLVED DUPLICATE of bug 1598613

(Core :: Audio/Video, defect)

Description

[r3nz_10]

Attachment: Screenshot 2021-03-04 at 11.49.26.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36

Steps to reproduce:

Added the following in the HTML markup inside the head
<link rel="preload" href="url-mobile.png" as="image" media="(max-width: 599px)">
<link rel="preload" href="url-desktop.png" as="image" media="(min-width: 600px)">

Actual results:

Firefox is preloading both of the resources on desktop

Expected results:

Should only preload url-desktop.png

Comment 1

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

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

Comment 2

[Jon Bauman [:jbauman:]]

Attachment: bug-1696392.html

I created a simple test and wasn't able to reproduce the issue. When I load this on desktop, the Network inspector shows only "280px-PNG_transparency_demonstration_1.png" getting fetched.

Comment 3

[Jon Bauman [:jbauman:]]

Attachment: bug-1696392.png

Comment 4

[Jon Bauman [:jbauman:]]

If you see different behavior with the attached test case, or you can share a minimized test case that reproduces the erroneous behavior, please let us know. Otherwise, I'm guessing there may be references to both images somewhere else in your page which is forcing them to download. What do you see if you remove everything else and leave only the head links?

Comment 5

[r3nz_10]

Attachment: loads-both-images.PNG

Using the HTML test you've provided, it shows that both images are being preloaded

Comment 6

[r3nz_10]

Attachment: console-warnings.PNG

And the console warnings does show the PNG_demo_Banana.png is getting ignored BUT it does say it is getting preloaded but not being used lol

Comment 7

[Jon Bauman [:jbauman:]]

I'm seeing different behavior locally between Nightly 88.0a1 (2021-02-26) and beta 87.0b5 (both show only one image loaded) and 86.0 (release), which loads both.

What Firefox version are you reproducing this with? The User Agent string from comment 1:

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36

Doesn't look like a normal Firefox UA and doesn't include a Firefox version. It looks like it's from Chrome. Here are the UA strings I see for my local versions:

Nightly 88.0a1 (2021-02-26): Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0
beta 87.0b5: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:87.0) Gecko/20100101 Firefox/87.0
86.0 (release): Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:86.0) Gecko/20100101 Firefox/86.0

Can you let me know what the behavior is for you on Firefox 86 and Nightly (88)?

Comment 8

[r3nz_10]

Thanks for looking in it and apologies for the confusion. I have stated that I the issue is happening on FireFox 86 in the Categories when I reported it.

Yes, I am getting the same behaviour as you:
Nightly 88.0a1 - Loads 1
Firefox 86 - Loads 2
Firefox Beta 87.0b7 - Loads 1

The issue seems to be on Firefox 86

Comment 9

[Jon Bauman [:jbauman:]]

Ok, I'm not sure what changed, but since it seems to be fixed as of 87, I'm going to resolve this. Thanks for the report and following up with the additional info!

Comment 10

[Jon Bauman [:jbauman:]]

Emilio, is this expected? Related to bug 1626997 perhaps?

Comment 11

[Emilio Cobos Álvarez (:emilio)]

I fixed this in bug 1598613. The speculative loader wasn't accounting for media correctly.