1216185 - Image assets are often pixelated on major web sites

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: General, defect)

Description

[Wilson Page [:wilsonpage]]

Attachment: google-com.png

Major websites (facebook.com and google.com) are not getting high resolution image assets for logos or iconography. This results in a general lack of polish and app-like experience.

Visiting the same sites on Chrome displays rich/high-res graphics.

Comment 1

[Wilson Page [:wilsonpage]]

Attachment: facebook-com.png

Note the lack of sharpe edges on the icons in the toolbar

Comment 2

[Wilson Page [:wilsonpage]]

Comment on attachment 8675743 [details]
google-com.png

Note the low-resolution Google logo

Comment 3

[Wilson Page [:wilsonpage]]

Hey Ben, have you noticed this? Perhaps you know who can look into this?

I'm thinking it could be several things:

A. Site owners doing poor UA sniffing
B. Site owners using only -webkit- prefixed CSS (perhaps related to devicepixel-ratio)  
C. Gecko reporting the wrong device-pixel-ratio (although window.devicePixelRatio seems correct)

---

Whatever it is, it makes major web-apps look unpolished and 'websitey' on fxos.

Comment 4

[Wilson Page [:wilsonpage]]

After inspecting google.com we can clearly see a high-resolution image is being sent to Chrome and not FirefoxOS:

Chrome: https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png
FirefoxOS: http://www.google.co.uk/images/branding/searchlogo/1x/googlelogo_tablet_tier1_hp_color_183x64dp.png

Comment 5

[Wilson Page [:wilsonpage]]

Inspecting facebook.com, we can see something similar:

Chrome: https://static.xx.fbcdn.net/rsrc.php/v2/yh/r/FloFUDJQA7_.png
FirefoxOS: https://static.xx.fbcdn.net/rsrc.php/v2/yT/r/FBKNJ_Ty5-R.png

This is because of the stylesheet delivered to each browser:

Mozilla: https://static.xx.fbcdn.net/rsrc.php/v2/yM/r/mWhkwakRFBD.css
WebKit: https://static.xx.fbcdn.net/rsrc.php/v2/y-/r/xquKio9K7dc.css

---

The only fix for this is either:

A. FirefoxOS starts using an ambiguous UA string to prevent it being singled out
B. We do some evangelism/relations with Facebook

Comment 6

[Wilson Page [:wilsonpage]]

(In reply to Wilson Page [:wilsonpage] from comment #4)
> After inspecting google.com we can clearly see a high-resolution image is
> being sent to Chrome and not FirefoxOS:
> 
> Chrome:
> https://www.google.co.uk/images/branding/googlelogo/2x/
> googlelogo_color_160x56dp.png
> FirefoxOS:
> http://www.google.co.uk/images/branding/searchlogo/1x/
> googlelogo_tablet_tier1_hp_color_183x64dp.png

In Chrome if I switch my user-agent string from Nexus4 to match FirefoxOS, I get sent the low-res Google logo:

FirefoxOS UA: 'Mozilla/5.0 (Mobile; rv:44.0) Gecko/44.0 Firefox/44.0'
Chrome Nexus: 'Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.122 Mobile Safari/537.36'

---

In summary, our UA is blacklisting us from an experience as polished as Chrome on Android. Is this a sign that we should follow Microsoft's [1] and Chrome's example and make our UA more ambiguous to prevent Firefox being discriminated? 

[1] http://blogs.windows.com/msedgedev/2015/06/17/building-a-more-interoperable-web-with-microsoft-edge/

Comment 7

[[:fabrice] Fabrice Desré]

Web compat team to the rescue!

Comment 8

[Mike Taylor [:miketaylr]]

Hi Wilson,

It's probably best to file individual bugs for each of these issues and we can work on diagnoses and with the sites on getting updated. And if you know of more sites, please file new bugs in Tech Evangelism::Mobile or on webcompat.com.

> In summary, our UA is blacklisting us from an experience as polished as Chrome on Android. Is this a sign that we should follow Microsoft's [1] and Chrome's example and make our UA more ambiguous to prevent Firefox being discriminated? 

That's probably true to some extent, given that most major sites assume smartphone browsers are either iOS or Android. But adding tokens in the UA string to be more like either is problematic, as it often leads to a new set of problems (for example, app store install banners, assumptions about webkit/apple CSS + APIs, etc). I would recommend against pretending to look more like Chrome or iOS because it will probably end up breaking more sites than it will fix.

Any new product or mobile platform has an uphill battle, unfortunately. Often sites aren't interested in making changes due to low market share. And market share may stay low due to a poor UX, compared to existing platforms.

Comment 9

[Mike Taylor [:miketaylr]]

Another problem is often sites like Facebook rely on device databases like WURFL to help them know who to send hi-res assets to, rather than switching on devicePixelRatio (or similar feature detection). As we ship FxOS on hardware with nicer screens, there's no real way for these sites to know which assets to serve since we don't send device ids by default (or have processes to communicate updates to these types of companies/frameworks):

<https://developer.mozilla.org/en-US/docs/Web/HTTP/Gecko_user_agent_string_reference#Device-specific_user_agent_strings>

It's possible something like Client Hints (Bug #935216) can help us here, assuming these major sites use them. 

(Yeah it can feel like playing whack-a-mole, depending on the site.)

Comment 10

[Karl Dubost💡 :karlcow]

Thanks Wilson for the heads up and welcome to the Web standards/compatibility/interop jungle ;)

Let's close this as WONTFIX. And let's open individual bugs on https://webcompat.com/ for the specific site issues as Mike explained. 

If you are interested by the webcompat work issues or have questions about it, do not hesitate to write to our mailing-list compatibility on lists.mozilla.org (publicly archived).

Comment 11

[Wilson Page [:wilsonpage]]

Unable to submit facebook.com issue due to: https://github.com/webcompat/webcompat.com/issues/688. Would appreciate it someone with access could submit it on my behalf :)

Comment 12

[Przemek Abratowski [:przemek] UX]

Attachment: blurry google logo in search results pages

I'm seeing the same issue in the Firefox Browser on an iPhone 5 for the Google logo, but only in the Google search results pages not the home page. Facebook's homepage looks fine on iPhone 5.

Comment 13

[Mike Taylor [:miketaylr]]

Oh yeah, our weird spam Facebook saga. Hope to remove that restriction soon. :/

I've filed Bug 1216275 for FB.