Some JPEGs seem to be downloaded fine by Firefox, but they don't render completely. A progressive JPEG will remain very coarse, and a non-progressive JPEG will be missing… (tuilleadh eolais)
Some JPEGs seem to be downloaded fine by Firefox, but they don't render completely. A progressive JPEG will remain very coarse, and a non-progressive JPEG will be missing the bottom part. From all the things I have tried, I believe this might be a rendering bug in Firefox. Specifically:
- The images are downloaded fine. The page loading does not stall but finish immediately. If I right click the image and click "View image", it is displayed completely. If I open the Media tab of the Page information dialogue and look at the image there, it is displayed completely as well. Most curiously, if I use the Color picker tool and hover over where the rest of the image *should* be, it displays the actual image pixels in the raster and also returns the correct color value of the image pixels, while the main browser window still renders these regions as transparent. I have added a snapshot of this case to this post. Hence, the problem also doesn't seem to be a CSS/layout issue of the page (Page inspector shows the img block correctly).
- Clearing all cache and cookie data, then restarting Firefox in safe mode doesn't make a difference. I even installed a vanilla Firefox to a fresh virtual machine, and experienced the same problem when opening these pages. Other browsers (tested: Opera, Chrome, IE) don't show the same issue.
- Reloading with forced cache renewal (Ctrl+Shift+R) most often doesn't change the rendering of the image, but rarely will end up displaying it either more or less incompletely than before.
- I can see the issue happening with two images on two separate pages. I re-encoded these using different software and different settings, but the problem persisted, so it doesn't seem to be an issue of corrupt images.
- I created a toy example to try and replicate the issue: an identical page with a different image created specifically to try and trigger the issue. What I found is that the issue is only triggered once the JPEG file is above a certain size (somewhere between 15 and 40 kB minimum). What happens seems to be that the rendering of the image in the main browser window stops after reading the image up to a certain length. Though again, the image seems to be loaded into cache and memory completely as evidenced by the display when using View image or Page information.
I did three versions of the test page to try and replicate the issue. The first page's image is 11 kB and always seems to render completely. The second and third page's images are 102 kB and 107 kB in size respectively, and will usually render incompletely. The image on page 2 uses progressive encoding, so the image will end up being rendered blurred. The image on page 3 uses straight encoding, so the image will end up being rendered with the bottom part missing.
So far I'm not sure why I only encountered this issue on pages of one specific website. Something must be triggering it, but it doesn't seem to be an issue with the server, the page, or the images.
Update: I submitted the site to Browsershots, requesting renderings for Firefox 35.0 and one earlier version for each of Windows, Linux and Mac. Unfortunately, the renderings for Mac failed. As for the others, none of the pre-35.0 versions exhibit the rendering issue, and it's not present in Firefox 35.0 on Ubuntu 12.04 LTS, but shows up on Firefox 35.0 on Windows 2008 R2.
The following are the URLs of the testing pages in case you want to check yourself: (backgrounds darkened to show transparency)
http://www.abgase.org/firefox_debug.html (11kB, no issue)
http://www.abgase.org/firefox_debug2.html (102kB progressive)
http://www.abgase.org/firefox_debug3.html (107kB non-progressive)
(Do Ctrl+Shift+R a few times if the issue doesn't seem to show, to be sure. If by a fluke I can get it to render correctly, it will fail again after 2-3 reloads at most.