CODEWITHSUNDEEP
htmlcssmacosrendering
Can Poyrazoğlu
Can Poyrazoğlu

Reputation: 34790

Empty space displayed between images on Mac but not on PC

I have a webpage and I'm trying to display an image. Because the images are relatively high quality, I'm splitting the images into four JPEG files and displaying them one under another. I get better loading times with this. Everything works perfect on a PC on all browsers. When I move to Mac, I have this issue:

image

Look closely at the image, at exactly 75% from the top to bottom, when third image finishes and the fourth one is displayed, there is a thin gap between images. This does not happen on Windows (Firefox, IE, Chrome) and mostly happens on OS X (Firefox, Safari, Chrome). It may go away or appear at other image boundaries (i.e. between first and second strip instead of third and the fourth) when I resize it. I don't know the exact reason (it's probably related to everything being an integer on PC and floating point on Mac) and I need to solve it. There is nothing special about CSS, images are just displayed as blocks with width 100% to fit the container. I've tried playing with padding and margins, but I can't get it to work. I can get rid of it by setting something like margin:-0.2px but this obviously is a very dirty solution and even though very slightly, distorts the image.

Here is the code, if it helps:

<div class="photoborder" id="PhotoContainer" style="width: 536px; height: 354px; left: 376.5px;">
    <div style="" id="ContentDiv" onclick="unloadPhoto();">
        <img id="PhotoSlice0" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_0.jpg" class="partialimage">
        <img id="PhotoSlice1" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_1.jpg" class="partialimage">
        <img id="PhotoSlice2" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_2.jpg" class="partialimage">
        <img id="PhotoSlice3" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_3.jpg" class="partialimage"></div>
    <div style="opacity: 0;" id="PhotoInfoBgDiv" onmouseover="setOver(true);" onmouseout="setOver(false);">
    </div>
</div>

PhotoContainer has an absolute positioning. ContentDiv has overflow-x hidden, and that's it.

Upvotes: 0

Views: 197

Answers (2)

user1721135
user1721135

Reputation: 7092

A solution to the loading problem may be to use a progressive image instead.

It will load immediately, and increase in sharpness. It will also decrease file size.

Upvotes: 0

ralph.m
ralph.m

Reputation: 14365

What you are doing seems like a really bad idea to me. Apart from causing trouble like this, it also involves more calls to the server. There are better options. My preference is to give the image a large width and height (say double of the width and height I want it to appear on screen) and then save the image at a fairly low quality. It comes out looking really sharp on screen, even on retina displays, and is usually a really small file size. There's a nice article about this here: http://blog.netvlies.nl/design-interactie/retina-revolution/ (This is my favorite solution to the responsive images / retina images conundrum.)

Upvotes: 1

Related Questions