Some favicons are more pixelated in Firefox than in Chrome and Edge on Retina Macs and HiDPI Windows

NEW
Unassigned

Status

()

--
trivial
3 years ago
3 months ago

People

(Reporter: billdillensrevenge, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 1 bug)

45 Branch
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(6 attachments)

(Reporter)

Description

3 years ago
Created attachment 8739183 [details]
faviconffchrome.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160315153207

Steps to reproduce:

Used Firefox on a Surface Pro 4 (I assume this issue is not specific to the SP4 though, it's just the only computer I can test on right now)


Actual results:

I've noticed on the Surface Pro 4 that a good number of favicons in the tab look worse than they do in Chrome. It looks like they aren't scaling as nicely as they do in Chrome. I've attached a screenshot of some examples


Expected results:

Favicons should look normal
(Reporter)

Updated

3 years ago
Severity: normal → trivial

Updated

3 years ago
Component: Untriaged → ImageLib
Product: Firefox → Core
Component: ImageLib → Tabbed Browser
Product: Core → Firefox
Status: UNCONFIRMED → NEW
Ever confirmed: true
If I remove all -moz-crisp-edges from:
  browser/base/content/browser.css
  browser/base/content/tabbrowser.css
the problem goes away for me.

I tested on wikipedia. The favicon it return had a variety of sizes between 16x16 and 48x48 IIRC.

These were added in
http://hg.mozilla.org/mozilla-central/rev/ada49c25fe97
of bug 1041845.
Blocks: 1041845
Flags: needinfo?(MattN+bmo)
(Reporter)

Comment 2

3 years ago
(In reply to Timothy Nikkel (:tnikkel) from comment #1)
> If I remove all -moz-crisp-edges from:
>   browser/base/content/browser.css
>   browser/base/content/tabbrowser.css
> the problem goes away for me.
> 
> I tested on wikipedia. The favicon it return had a variety of sizes between
> 16x16 and 48x48 IIRC.
> 
> These were added in
> http://hg.mozilla.org/mozilla-central/rev/ada49c25fe97
> of bug 1041845.

I see. If this is messing up favicons, shouldn't it be removed or disabled? I know it's not a serious problem but if there's a quick and easy fix, someone should take a few minutes to do it. It really messes up certain favicons, especially amazon.com's
I didn't read bug 1041845 in detail but it seems it was added so that favicons that are only 16x16 when displayed on a retina (or similar) screen and scaled up to 32x32 will not look good using a smoothing type resizing algorithm. For sites with favicons bigger than 16x16 this doesn't seem to work out well.
(In reply to Timothy Nikkel (:tnikkel) from comment #3)
> I didn't read bug 1041845 in detail but it seems it was added so that
> favicons that are only 16x16 when displayed on a retina (or similar) screen
> and scaled up to 32x32 will not look good using a smoothing type resizing
> algorithm.

That's correct. It would probably be easy to disable this on SVG files (using an attribute selector looking at the file suffix assuming they have an SVG suffix) if it's a problem there. To handle this with images it may be harder and require something like 751712 and then send the sizes along with the URL to the tabstrip.

Dolske, is this something that fits into your quality team?
Flags: needinfo?(MattN+bmo) → needinfo?(dolske)
(Reporter)

Comment 5

3 years ago
Is this a problem on retina macs too or just hidpi windows displays?
I see it on retina mac.
(Reporter)

Updated

3 years ago
Summary: Certain favicons in the tab look bad in Firefox compared to Chrome on the Surface Pro 4 → Certain favicons in the tab look bad in Firefox compared to Chrome on retina macs and hidpi windows
Blocks: 1271838
Flags: needinfo?(dolske)
(Reporter)

Comment 7

2 years ago
Created attachment 8835645 [details]
arsfavicon.png

just noticed another example of this, comparing arstechnica.com favicon in Edge vs Firefox on a Surface Pro 4 (which uses 200% scaling by default)

Comment 8

2 years ago
Came here to report the same thing, also downsizing larger favicons does not look good.

The usefulness of -moz-crisp-edges can even be seen on hidpi screens with this bugzilla instance's favicon, which is 16x16.
Chrome appears to not smooth icons 16x16 or smaller but does so for everything above. 

So I can confirm that removing crisp edges makes all favicons look good, just like in chrome. 

```
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .tab-icon-image {
    image-rendering: -moz-crisp-edges;
  }
}
```

Not sure what the media query has to look like to only apply that image-rendering attribute based on the source size of the favicon.
amazon.com's and wikipedia.org's favicons are also more pixelated in Firefox than in Chrome or Edge. I see this problem on my Retina MacBook Pro and HiDPI Windows 10 laptops.

https://www.amazon.com/
https://www.amazon.com/favicon.ico

https://www.wikipedia.org/
https://en.wikipedia.org/favicon.ico
Summary: Certain favicons in the tab look bad in Firefox compared to Chrome on retina macs and hidpi windows → Some favicons are more pixelated in Firefox than in Chrome and Edge on Retina Macs and HiDPI Windows
Not sure if we still need -moz-crisp-edges after the rewrite of favicons that happened recently?
(In reply to Timothy Nikkel (:tnikkel) from comment #10)
> Not sure if we still need -moz-crisp-edges after the rewrite of favicons
> that happened recently?

The recent changes introduced the possiblity to store hidpi favicons through the API, but the browser is still just storing the first icon it finds, it being hires or not. So while it's an improvement when the first icon is hires, in other cases we still just store a 16px icon.
We still need to do follow-up work (bug 1352459 for example, that will likely be worked on by Activity Stream).
Also, the tabs don't use the favicons service, they just directly fetch the icon. This is mostly because the favicons service doesn't store icons in PB mode for now.
(Reporter)

Comment 13

a year ago
Created attachment 8902308 [details]
newyoutubefavicon.png

YouTube updated their logo and favicon today and gosh it looks terrible in Firefox because of this issue. Machine is Windows 10 at 200% scaling
Depends on: 1402250
(Reporter)

Comment 14

7 months ago
I hope this doesn't get forgotten, some favicons still look terrible in Firefox compared to Chrome and Edge, and I don't think websites appreciate Firefox making their favicons looking so bad
Can you provide examples of pages showing pixelated favicons?

Comment 16

7 months ago
https://www.reddit.com/ as an example has a very pixelated icon on hidpi screens with the yesterday's nightly build. The icon looks very smooth in comparison on chromium.

Comment 17

7 months ago
Sorry, forgot to mention, that for me this is on Linux/wayland, not as the bug title indicates on windows or mac
How are your dpi settings?
On Windows I don't see any pixelation (it looks as bad as in Chrome), but likely because we start using image-rendering: -moz-crisp-edges; from 2dppx on, and I'm at 150% dpi.
I think what you see may just be an instance of Bug 1402250, the choice is between pixelated or blurry icons, hopefully most websites today have at least 32px icons, and thus we could just accept a few blurry icons (based on our telemetry, 9% of the pages declaring a sizes attribute have 16px icons, unfortunately many pages don't declare any attribute).
Created attachment 8962452 [details]
Windows_10_250%_default.png

(In reply to Marco Bonardo [::mak] from comment #18)
> How are your dpi settings?
> On Windows I don't see any pixelation (it looks as bad as in Chrome), but
> likely because we start using image-rendering: -moz-crisp-edges; from 2dppx
> on, and I'm at 150% dpi.

I see a blurry Reddit favicon when using Windows 10's default scaling (250% on my laptop), even though Reddit offers favicons in many sizes, from 16x16 and 32x32 up to 192x192. Here is a zoomed screenshot comparing Amazon's and Reddit's favicons at 250% scaling. Amazon's (and Wikipedia's, not shown here) favicons look identical in Firefox and Chrome, but Reddit's is blurry in Firefox.
Created attachment 8962453 [details]
Windows_10_200%.png

When I use my preferred scaling (200%), Amazon's and Wikipedia's favicons are pixelated in Firefox compared to Chrome and Reddit's is still blurry.
(Reporter)

Comment 21

7 months ago
Created attachment 8962489 [details]
fffc.png

Windows 10 v1709, system scaling is 200% which is significant because there should be no scaling artifact weirdness you could see at 175% system scaling, for example. Firefox 59 stable vs Chrome 65 stable vs Edge. Please zoom in so you can see the differences better
(In reply to Will from comment #21)
> Windows 10 v1709, system scaling is 200% which is significant because there
> should be no scaling artifact weirdness you could see at 175% system
> scaling, for example. Firefox 59 stable vs Chrome 65 stable vs Edge. Please
> zoom in so you can see the differences better

Yes this is expected and it's Bug 1402250.
I only care about blurry icons here.

(In reply to Chris Peterson [:cpeterson] from comment #19)
> I see a blurry Reddit favicon when using Windows 10's default scaling (250%
> on my laptop), even though Reddit offers favicons in many sizes, from 16x16
> and 32x32 up to 192x192.

Most of them don't scale very well, they look blurry in all the browsers for me at 150%.

> Here is a zoomed screenshot comparing Amazon's and
> Reddit's favicons at 250% scaling. Amazon's (and Wikipedia's, not shown
> here) favicons look identical in Firefox and Chrome, but Reddit's is blurry
> in Firefox.

The pixelated icon is due to Bug 1402250 as I said.

What you see at 250% is really unexpected to me. 
what's the exact url where you see that?
at 250% we should need a 40px icon, since there is not we pick the larger one and scale it down, that is https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png

I wonder if the tab is just picking the largest icon... I will investigate this tomorrow and file a bug in case
Flags: needinfo?(mak77)
Ok, there's a bug in how ContentLinkHandler picks sizes, I'll file it apart and make it block this one.
Flags: needinfo?(mak77)

Updated

7 months ago
Depends on: 1449523
The next nightly should solve the problem of very blurry icons on Reddit (and sites with a similar bug). I plan to uplift the fix to Beta.
If you notice other pages with very blurry icons in the tab, please let me know and I'll investigate.
You need to log in before you can comment on or make changes to this bug.