Isotope blurred elements in google chrome

Question

I'm using isotope in Google Chrome and all items contains:

-webkit-transform: translate3d(properties);

and every even element[2,4,6,8,10,12,14...] is blurred in chrome, in firefox everything is ok

Here are properties of first elements:

position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(225px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(450px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(675px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(900px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 183px, 0px);

I have tried to use -webkit-transform: scale3d(0.5, 0.5, 1); but it doesn't work

@ISuthanBala: SO [supports embedded code snippets](http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) now. — Mr. Polywhirl, Oct 28 '14 at 19:41
Please post screenshots of the blurring and/or a working fiddle/example. Impossible to see specifically what you mean by blurring and debug using what you've provided otherwise. — CaribouCode, Oct 29 '14 at 00:38
You can check out this answer : http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform/26252137#26252137 — web-tiki, Oct 29 '14 at 08:40

score 0 · Answer 1 · answered Oct 30 '14 at 13:36

0

It might be the perspective. Try putting the default perspective on your elements. I've had a similar problem with 3D buttons on Safari.

answered Oct 30 '14 at 13:36

arrow

174
3
15

Isotope blurred elements in google chrome

1 Answers1