1268237 - Images take a long time to load - do not load - appear fuzzy & pixelated

Status: UNCONFIRMED

(Core :: Graphics, defect, P3)

Description

[bull500]

Attachment: 9gag.png

I've been noticing this for quite some time but can't point out the root cause as to what causes it.

Mainly images don't load when tabs are opened in the background(middle click mouse button) or the do load and it appears fuzzy/pixelated. 
It mostly happens on 9gag though http://9gag.com/gag/aZMQ9Wz  


Another issue is when the image is a slideshow - the initial images are loaded but later on its blank or takes a long time to load.
The best case i found was this NatGeo article - http://news.nationalgeographic.com/2016/04/160425-new-delhi-most-polluted-city-matthieu-paley/   

I was reading it, then saw a few pictures, continued reading and tried viewing the remainder of the pictures. Unfortunately most didn't load after the initial viewing or some did load after a long time of waiting.  

I viewed on another browser and it worked quite well there so felt its does show signs of a bug.

Comment 1

[bull500]

Attachment: NatGeo.png

Comment 2

[:Gijs (he/him)]

Does this reproduce on a clean profile? ( https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles )

Comment 3

[bull500]

(In reply to :Gijs Kruitbosch from comment #2)
> Does this reproduce on a clean profile? (
> https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-
> firefox-profiles )

Yes confirmed on a clean profile as well! 
Same results as shown on attached screenshots.

Comment 4

[Alice0775 White]

@reporter,
1. Could you paste "Graphics" section of about:support?

2. And, could you test with the following spoofing UA? 
  general.useragent.override = 
  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.87 Safari/537.36

Comment 5

[bull500]

(In reply to Alice0775 White from comment #4)
> @reporter,
> 1. Could you paste "Graphics" section of about:support?
> 
> 2. And, could you test with the following spoofing UA? 
>   general.useragent.override = 
>   Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
> Chrome/50.0.2661.87 Safari/537.36

1. Graphics: (It didn't detect my Nvidia GT525M though)

Features
Compositing	        Basic
Asynchronous Pan/Zoom	wheel input enabled
WebGL Renderer	        Intel Open Source Technology Center -- Mesa DRI Intel(R) Sandybridge Mobile
Hardware H264 Decoding	No
GPU #1
Active	                Yes
Description	        Intel Open Source Technology Center -- Mesa DRI Intel(R) Sandybridge Mobile
Vendor ID	        Intel Open Source Technology Center
Device ID	        Mesa DRI Intel(R) Sandybridge Mobile
Driver Version	        3.0 Mesa 10.6.9 (git-8957b69)
Diagnostics
AzureCanvasAccelerated	0
AzureCanvasBackend	skia
AzureContentBackend	cairo
AzureFallbackCanvasBackend	none
CairoUseXRender        	0


2. Yes it does seem to load better with this setting!
Also i noticed a nice fade in effect as well when checking out new images.

Comment 6

[bull500]

Attachment: backchannel.png

Another one with a similar situation

https://backchannel.com/who-was-ramanujan-83b4d5b05665

Comment 7

[Simona Badau, Desktop QA]

Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160615030209

I'm not being able to reproduce the issue where the images are being fuzzy or pixelated on 9gag or backchannel websites.

Indeed the images from the NatGeo article are taking a lot of time to load.

Comment 8

[Mike Conley (:mconley) (:⚙️)]

The UA string change being helpful is kind of worrying. If it's actually improving things for you, I wonder what these sites are doing.

/cc miketaylr

Comment 9

[bull500]

Attachment: imageloadingprob.webm

URL in the video: https://medium.com/@leonard.wohlfarth/mysym-a-phone-design-to-make-you-question-all-others-14dbced4925c#.9argjdlr0

Comment 10

[Mike Conley (:mconley) (:⚙️)]

The video from comment 9 really clears things up (no pun intended). Hey mstange, stab in the dark, any idea what might be failing for us here?

Comment 11

[Markus Stange [:mstange]]

The blurry preview is something that medium.com does intentionally, until the images have loaded completely. For some reason they did not want full-resolution images to display progressively.

It would be nice to find out whether we're waiting for the image to load from the network, or whether we're done loading them and are waiting for them to decode. The Network panel in the devtools shows whether we're waiting for the network.