While working with isotope in Google Chrome, I noticed that all items have the following CSS code:
-webkit-transform: translate3d(properties);
In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal.
Let's take a look at the properties of the first few 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 attempted using -webkit-transform: scale3d(0.5, 0.5, 1); but unfortunately, it did not resolve the issue.