1232091 - Facebook mobile site serves low-res photos to Firefox on HiDPI Android devices

Status: VERIFIED WORKSFORME

(Web Compatibility :: Site Reports, defect, P1)

Description

[Daniel Holbert [:dholbert]]

STR:
 0. Have a facebook account.
 1. On Android, visit https://m.facebook.com/
 2. Tap Facebook's "hamburger menu" icon (upper-right)
 3. Look at your profile image.

ACTUAL RESULTS:
My profile image is obviously upscaled from a low-res version, and looks blurry and gross.

EXPECTED RESULTS:
My profile image should be crisp.

In Chrome on Android, I get EXPECTED RESULTS.

I'm using Firefox nightly on a OnePlus One android phone, using CyanogenMod 12.1 (equivalent to Android 5.1.1)

(Not sure yet where this bug belongs; might be Tech Evang, depending on how Facebook is choosing the image to serve here. Starting out in Layout:Images for now.)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot taken with Firefox Nightly

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot taken with Chrome

Comment 3

[Daniel Holbert [:dholbert]]

This image element looks like this, in Firefox:
<i class="img profpic" aria-label="Daniel Holbert" role="img" style="background:#d8dce6 url(&quot;https://scontent-sjc2-1.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/cp0/e15/q65/p40x40/11703317_10101780528553303_6695817899666029324_n.jpg?efg=eyJpIjoidCJ9&amp;oh=d1498f9b7a6cd34c6d77f536dd03cecd&amp;oe=571FCDAE&quot;) no-repeat center;background-size:100% 100%;-webkit-background-size:100% 100%;width:40px;height:40px;"></i>

Facts:
* That image...
https://scontent-sjc2-1.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/cp0/e15/q65/p40x40/11703317_10101780528553303_6695817899666029324_n.jpg?efg=eyJpIjoidCJ9&oh=d1498f9b7a6cd34c6d77f536dd03cecd&oe=571FCDAE
... is natively 40px by 40px (as you might suspect from the p40x40 in its URL).

* The <i> element also is 40px by 40px (in CSS pixels).

* window.devicePixelRatio is 3, so for optimal crispness (in terms of device pixels), they really should be using a 120px by 120px image, I think.

Comment 4

[Daniel Holbert [:dholbert]]

(WebIDE isn't showing me the DOM that Chrome has on my device, so I can't be sure what the image is there. But I'm betting it's a 120px by 120px version of the same image.

Seems likely that Facebook might be relying on some webkit-specific resolution query in JS here, when setting up this element's 'style' attribute, and falling back to a 1.0 resolution if their query fails.

Comment 5

[Daniel Holbert [:dholbert]]

OK, got WebIDE to work in Chrome, and got image URLs from a slightly different page which displays the same issue (albeit not quite as obviously) -- my main "https://m.facebook.com/dholbert" frontpage, with my profile pic front and center.

There, Firefox Nightly receives the following DOM:
<i class="img _42b6 _403j profpic" aria-label="Daniel Holbert" role="img" style="background:#d8dce6 url(&quot;https://scontent-sjc2-1.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/cp0/e15/q65/p148x148/11703317_10101780528553303_6695817899666029324_n.jpg?efg=eyJpIjoidCJ9&amp;oh=97b4cd75262050a5f6a4bd43b75f938f&amp;oe=56DDE4F1&quot;) no-repeat center;background-size:100% 100%;-webkit-background-size:100% 100%;width:131px;height:131px;"></i>

and Chrome receives the following DOM:
<i class="img _42b6 _403j profpic" aria-label="Daniel Holbert" role="img" style="background:#d8dce6 url(&quot;https://scontent-sjc2-1.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/fr/cp0/e15/q65/11703317_10101780528553303_6695817899666029324_n.jpg?efg=eyJpIjoidCJ9&amp;oh=42ad9cb692139fac2bd6cbb55d94cea2&amp;oe=56DB9281&quot;) no-repeat center;background-size:100% 100%;-webkit-background-size:100% 100%;width:131px;height:131px;"></i>


Here are the image URLs (with URL encoding removed):
Firefox receives this 148x148 image:
https://scontent-sjc2-1.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/cp0/e15/q65/p148x148/11703317_10101780528553303_6695817899666029324_n.jpg?efg=eyJpIjoidCJ9&oh=97b4cd75262050a5f6a4bd43b75f938f&oe=56DDE4F1
Chrome receives this 235x235 image:
https://scontent-sjc2-1.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/fr/cp0/e15/q65/11703317_10101780528553303_6695817899666029324_n.jpg?efg=eyJpIjoidCJ9&oh=42ad9cb692139fac2bd6cbb55d94cea2&oe=56DB9281

Comment 6

[Daniel Holbert [:dholbert]]

:zpao, any chance you know someone involved with the Facebook mobile-site code that decides to send hi-res photos to HiDPI devices (for Chrome)? It'd be great if those same hi-res photos could be served to Firefox as well. See attached screenshots for the difference this makes.

Comment 7

[Daniel Holbert [:dholbert]]

(Note that this bug probably only reproduces on a HiDPI device. You can see if your device fits the bill by:
 - enable remote debugging in Firefox Nightly for Android, in Settings|Advanced
 - connect from a desktop machine using Firefox WebIDE (Tools|Web Developer|WebIDE)
 - Click WebIDE's entry for Firefox Nightly on Android
 - Choose some android tab in WebIDE (on the left side) and type "window.devicePixelRatio" in the console at the bottom.

This prints out "3" for me, which means I've got 3 device pixels per CSS pixel, i.e. this is a HiDPI device.)

Comment 8

[Karl Dubost💡 :karlcow]

Daniel, 

does it still happen? If yes I'll contact facebook through their mailing list.

Comment 9

[Daniel Holbert [:dholbert]]

It does indeed. Thanks!

Comment 10

[Karl Dubost💡 :karlcow]

Contacted facebook through our partner mailing-list.

Comment 11

[Karl Dubost💡 :karlcow]

Realized today that there was a similar issue on webcompat.com
https://webcompat.com/issues/532

Comment 12

[Mike Taylor [:miketaylr]]

Karl sent a reminder to FB on Oct 31, still an issue.

Comment 13

[Jan Henning [:JanH]]

Oops, wrong bug (the other one's a clear duplicate).

Comment 15

[bull500]

I think the main problem here is that they are able to target very specifically with the UA-agent string
FF does not list out the device in the UA along with other details and Facebook simply loves to tailor the site specific to the device.
https://www.facebook.com/notes/facebook-engineering/crowdsourcing-mobile-device-capabilities/441195668919/
Is there an alternative they could use that gives them the same functionality without much privacy intrusion with device listed in UA

Comment 16

[Mike Taylor [:miketaylr]]

I pinged to the thread asking if there was any progress internally.

Comment 17

[Karl Dubost💡 :karlcow]

> After investigating this it seems like the issue is that unlike Chrome
> or Samsung browser the user agent for Firefox for Android does not give 
> us any device information. Since we don’t know what the current device 
> is we are unable to look up the pixel ratio for the device and must 
> fallback to lower quality images :/

That was the facebook answer.

Comment 18

[bull500]

(In reply to Karl Dubost :karlcow from comment #17)
> > After investigating this it seems like the issue is that unlike Chrome
> > or Samsung browser the user agent for Firefox for Android does not give 
> > us any device information. Since we don’t know what the current device 
> > is we are unable to look up the pixel ratio for the device and must 
> > fallback to lower quality images :/
> 
> That was the facebook answer.

Twitter does this fine, along with several other websites

Comment 19

[Zhelyo Todorov Zhelev]

I have the same problem with Firefox 58.0.1 (Andorid 7.0 on Samsung Galaxy S7 Edge). Used an add-on to change the user agent to Android Phone / Chrome 59 and now m.facebook.com looks just fine.

Comment 21

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 23

[Raul Bucata]

I was not able to reproduce the issue. The profile picture is displayed as expected, with no issues encountered regarding the quality of the picture:

https://prnt.sc/eRrJoWpig1Lf

Daniel, is the issue reproducible on your side?

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2015870107 -🦎100.0a1-20220321065848🦎)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Comment 24

[Daniel Holbert [:dholbert]]

(In reply to raul softvision from comment #23)

I was not able to reproduce the issue. The profile picture is displayed as expected, with no issues encountered regarding the quality of the picture:

https://prnt.sc/eRrJoWpig1Lf

I can still reproduce.

Your screenshot seems to show a Facebook profile page -- that's not what this bug is about. This bug is about the "thumbnail" profile photo that is shown at the top-left of the screen inside of Facebook's hamburger menu. (See comment 1 vs. comment 2 -- the facebook UI looks a bit different now, but it's still kind-of similar.)

That thumbnail is still noticeably lower-res/blurry in Firefox as compared to Chrome for me.

Comment 25

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Facebook mobile site on Firefox Nightly v100 on Android

Here's a screenshot showing the issue in current Nightly. My profile image here (shown in the hamburger menu) is blurry/low-res, as compared to Chrome.

Comment 26

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Facebook mobile site on Chrome 99 on Android

Here's a screenshot in Chrome, for comparison. As you can see here, Chrome is served a different Facebook design nowadays. But the profile image in the hamburger menu is displayed at approximately the same size, with a higher-res / less-blurry version in Chrome as compared to Firefox.

Comment 27

[Daniel Holbert [:dholbert]]

(In my screenshots/testing today, I'm using a Pixel 4a with Android 12, for what it's worth.)

Comment 28

[Daniel Holbert [:dholbert]]

Using about:debugging to do similar investigation to what I did in comment 3 but with today's Facebook design, I confirmed that Chrome is still getting a higher-res image than Firefox.

My window.devicePixelRatio on this device is 2.75 in Chrome (slightly-different in Firefox for some reason -- 2.727272727272727). So for ideal crispness, we'd like an image whose native size is ~2.7x-3x the size that it's displayed on-screen.

In Chrome, that is indeed what happens -- they receive a 99px by 99px image file, which gets painted to a 36px by 36px area. (which is a 2.75x scale factor).

vs. in Firefox Nightly, we receive a 34px by 34px image file, which gets painted to a 34px by 34px area.

So, Facebook doesn't seem to be accounting for the fact that we have a HiDPI screen here (which ideally should make them serve higher-res images, like they do to Chrome).

Comment 29

[Raul Bucata]

Thanks for the heads-up, Daniel. I have mistakenly tapped on my profile picture, instead of observing the profile picture (my apologies). I can confirm that the issue is still reproducible:

https://prnt.sc/rDoq7QAo46Fs

Also, I can confirm your findings in about:debugging

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2015870571 -🦎100.0a1-20220323094932🦎)
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Comment 30

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

The severity field for this bug is relatively low, S3. However, the bug has 3 duplicates and 13 See Also bugs.
:ksenia, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.

Comment 31

[BugBot (nomail) [:suhaib / :marco/ :calixte]]

The last needinfo from me was triggered in error by recent activity on the bug. I'm clearing the needinfo since this is a very old bug and I don't know if it's still relevant.

Comment 32

[Zhelyo Todorov Zhelev]

(In reply to Release mgmt bot (nomail) [:suhaib / :marco/ :calixte] from comment #31)

The last needinfo from me was triggered in error by recent activity on the bug. I'm clearing the needinfo since this is a very old bug and I don't know if it's still relevant.

It is relevant! The bug is still there and it is very annoying. A lot of people do not use Firefox on their smartphones just because their Facebook does not look well.

Comment 33

[Raul Bucata]

I can confirm that the issue is still reproducible

Tested with:

Browser / Version: Firefox Release 106.1.0 (2015909131-🦎106.0-20221010181815🦎 )/ Firefox Nightly 108.0a1 (2015911755-🦎108.0a1-20221023100414🦎)
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Comment 34

[Raul Bucata]

The issue is still reproducible.

Tested with:

Browser / Version: Firefox Release 109.2.0 (2015930059-🦎109.0.1-20230127170202🦎)/ Firefox Nightly 111.0a1 (2015932395-🦎111.0a1-20230208095231🦎)/Chrome Mobile Version 109.0.5414.117
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome.

Comment 35

[brz]

I was recently switched to a more modern version of the Facebook Mobile website and the issue seems to be solved for me now.

Comment 36

[Zhelyo Todorov Zhelev]

The problem no longer appear for me too.

Comment 37

[Ksenia Berezina [:ksenia]]

Based on the recent comments this appears to be no longer an issue.

Comment 38

[Daniel Holbert [:dholbert]]

Confirmed, yeah; the hamburger menu UI that I screenshotted in comment 26 gives me a crisp high-res photo now (and it seems Facebook has redesigned the layout a bit, too).