Facebook mobile site serves low-res photos to Firefox on HiDPI Android devices
Categories
(Web Compatibility :: Site Reports, defect, P1)
Tracking
(platform-rel -, firefox45 affected)
People
(Reporter: dholbert, Assigned: ksenia)
References
()
Details
(Keywords: qawanted, testcase-wanted, webcompat:site-wait, Whiteboard: [sitewait] [platform-rel-Facebook])
Attachments
(4 files)
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.)
Reporter | ||
Updated•9 years ago
|
Reporter | ||
Comment 1•9 years ago
|
||
Reporter | ||
Comment 2•9 years ago
|
||
Reporter | ||
Comment 3•9 years ago
|
||
This image element looks like this, in Firefox: <i class="img profpic" aria-label="Daniel Holbert" role="img" style="background:#d8dce6 url("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") 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 hidden (obsolete) |
Reporter | ||
Comment 5•9 years ago
|
||
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("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") 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("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") 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
Reporter | ||
Comment 6•9 years ago
|
||
: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.
Reporter | ||
Comment 7•9 years ago
|
||
(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•8 years ago
|
||
Daniel, does it still happen? If yes I'll contact facebook through their mailing list.
Comment 10•8 years ago
|
||
Contacted facebook through our partner mailing-list.
Updated•8 years ago
|
Updated•8 years ago
|
Updated•8 years ago
|
Comment 11•8 years ago
|
||
Realized today that there was a similar issue on webcompat.com https://webcompat.com/issues/532
Comment 12•8 years ago
|
||
Karl sent a reminder to FB on Oct 31, still an issue.
Comment 13•7 years ago
|
||
Oops, wrong bug (the other one's a clear duplicate).
Comment 15•7 years ago
|
||
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•7 years ago
|
||
I pinged to the thread asking if there was any progress internally.
Updated•7 years ago
|
Comment 17•7 years ago
|
||
> 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•7 years ago
|
||
(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•6 years ago
|
||
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.
Updated•6 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Comment 21•5 years ago
|
||
See bug 1547409. Moving webcompat whiteboard tags to keywords.
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•4 years ago
|
Comment 23•2 years ago
|
||
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:
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)
Reporter | ||
Comment 24•2 years ago
•
|
||
(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:
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.
Reporter | ||
Comment 25•2 years ago
|
||
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.
Reporter | ||
Updated•2 years ago
|
Reporter | ||
Comment 26•2 years ago
|
||
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.
Reporter | ||
Comment 27•2 years ago
|
||
(In my screenshots/testing today, I'm using a Pixel 4a with Android 12, for what it's worth.)
Reporter | ||
Comment 28•2 years ago
•
|
||
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•2 years ago
|
||
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:
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)
Updated•2 years ago
|
Updated•2 years ago
|
Comment 30•2 years ago
|
||
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•2 years ago
|
||
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 hidden (off-topic) |
Comment 33•2 years ago
|
||
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•1 year ago
•
|
||
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:
- Reproducible regardless of the status of ETP.
- Reproducible on the latest build of Firefox Nightly and Release.
- Works as expected using Chrome.
Comment 35•1 year ago
|
||
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•1 year ago
|
||
The problem no longer appear for me too.
Updated•2 months ago
|
Description
•