1838175 - Media queries are ignored for `link` elements with `rel=icon`

Status: RESOLVED DUPLICATE of bug 1790109

(Firefox :: Tabbed Browser, defect)

Description

[johshoff]

Attachment: media-query-link-icon.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/114.0

Steps to reproduce:

1. Load the attached test case in Firefox
2. Make the window less than 600px wide

Actual results:

Observe that the shortcut icon in the tab is white.

Expected results:

The shortcut icon should be black since that matches the media query

media="(max-width: 600px)"

Instead it just picks the last rel=icon link, even though the media query does not match.

Other notes:

• Same behavior regardless of what the width is when loading the page.
• Same behavior with other media queries, like prefers-color-scheme
• I get the expected results with media queries rel=stylesheet
• I observe the expected results in Chrome 114.0.5735.106 on Mac
• I observe the same results as Firefox with Safari 16.4 (18615.1.26.110.1) on Mac, so maybe this isn't a bug? It is surprising that it works for rel=stylesheet and not rel=icon, though.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Icon loading is handled in the front-end. We could support this easily to some extent, I believe.

Comment 3

[Ardelean Oana, Desktop QA [:oardelean]]

Hello, thank you for the bug report!
Managed to reproduce this on:

• Nightly 116.0a1;
• Firefox 115.0b5;
• Firefox 114.0.1;

Tested and reproduced on:

• macOS 12;
• Windows 10;
• Ubuntu 22;

Setting as NEW.