Large images not showing up in Chrome?

Question

Very large images will not be displayed in Google Chrome (although the scroll bars will still behave as if the image was present). The same images are often displayed in other browsers.

Here are two sample images. If you use Google Chrome, you will not see a long red bar:

Short blue
http://i.stack.imgur.com/ApGfg.png

Long red
http://i.stack.imgur.com/J2eRf.png

As you can see, the browser believes that there is a longer image, but it just does not appear. The image format does not matter either: I tried both PNG and JPEG. I also tested this on two different computers running different operating systems (Windows and OSX). This is obviously a mistake, but can anyone think of a workaround that would force Chrome to display large images?

Answer 1

Not that anyone cared or even looked at this post, but I found a strange workaround. The problem seems to be related to how Chrome manipulates scaling. If you set the zoom property to 98.6% or lower or 102.6% or higher, the image will be displayed (setting the zoom property to any value between 98.6% and 102.6% will cause rendering failure). Please note that the zoom property is not officially defined in CSS, so some browsers may ignore it (which is good in this case, since it is hacked for the browser). Until you mind that the image is slightly resized, I suppose this may be the best solution.

In short, the following code gives the desired result, as shown here :

 <img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png"> 

---

Update:

Actually, this is a good opportunity to kill two birds with one stone. As screens shift to higher resolutions (such as the Apple Retina display), web developers will want to start showing images that are twice as large, and then reduce them by 50%, as suggested. Thus, instead of using the zoom property, as suggested above, you can simply double the image size and make it half size:

 <img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png"> 

This will not only solve the problem with rendering in Chrome, but also make the image more enjoyable and clear on the next generation high-resolution display.