Question

I’ve been hacking at jquery isotope for awhile now and I am having an issue in chrome/safari in particular. The layout renders out like this:in Google Chrome/Safari. When you resize the window or hit the filter buttons, they will shift out normally. Upon inspecting the code I see that the -webkit-transform: translate is saying that only a part of the picture is shown.

I’ve stripped the code and started from scratch to make sure I wasn’t missing any steps, but this is incredibly frustrating as it seems like its only a Chrome/Safari issue whereas IE9/Firefox4 seem to be rendering this correctly.

I’ve tried to disable transform and css rendering, but that doesn’t have any effect as it still renders the pictures stacked and cropped off. Testing it locally it sometimes bugs out like the picture I uploaded but other times its fine.

I’ve uploaded the page to this directory: click here

Answer 1

From the Isotope docs:

Images

Inline dimensions For images, the best
method is to specify the width and
height of images inline.

<img src="img-file.jpg" width="280" height="160" />