2

I have been experimenting with CSS zoom property for quite a some time now. I took a large 1920X1200 size image and sliced it down horizontally into 10 pieces (10 each of 1920X120). I am positioning images on webpage like this - 

<img src="images/img0_01.jpg" style="position:absolute; top:0px; left:0px;">
<img src="images/img0_02.jpg" style="position:absolute; top:120px; left:0px;">
.
.
.
<img src="images/img0_10.jpg" style="position:absolute; top:1080px; left:0px;">

And then I am applying zoom to to the entire document like this - 

$("body").css("zoom","54%");

What I am expecting is to see all the 10 images as a single image, and I see as expected in Firefox/Chrome. However in Safari I see gaps between images (see attached screenshot). How can this be resolved ?

Note All the images have margin, padding and border set to 0. Positioning of the images should only be absolute with top and left values.

Would appreciate any kind of help. Thanks.

Live Demo

enter image description here

skos
  • 4,102
  • 8
  • 36
  • 59
  • I believe this is due to rounding, and different browsers do it differently. 54% of 120 is 64.8 - not an even number, and relies on the browser to round. And you are asking the browser to round the top position as well, not just the height. Possibly related: http://stackoverflow.com/a/16858031/870729 – random_user_name May 25 '14 at 19:04
  • @cale_b thank you for your inputs, I can see now where the problem is – skos May 25 '14 at 19:15

1 Answers1

0

One sort of quick hack I found that worked was just make the the images only 119 px apart instead of 120px. Looks much better on Safari and still looks pretty good on chrome.

Ellery
  • 1,356
  • 1
  • 14
  • 22