desandro/isotope — Issue #157: Don't pass floating-point pixel values to translate to avoid blur
Author: mkai
Created: 2012-03-04 17:01:16+00:00
State: open

I'm using a fluid grid (item column width is %-based) and a script that sets the number of columns dynamically depending on the current column width on window resize. This sometimes leads to Isotope calculating float values for pixel-based positions, e. g.

```css
-webkit-transform: translate3d(246.7px, 0px, 0px);
```

In WebKit, this results in all item elements being blurry (not font-related, also affects images and other elements in the container).

Simply rounding the pixel value to the nearest integer fixes the issue:

```javascript
var transformFnNotations = Modernizr.csstransforms3d ?
{ // 3D transform functions
translate : function ( position ) {
// FIX: this always uses pixels, so we make sure these are always ints.
position[0] = Math.round(position[0]);
position[1] = Math.round(position[1]);
return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0) ';
}
...
} :
{ // 2D transform functions
translate : function ( position ) {
// FIX: this always uses pixels, so we make sure these are always ints.
position[0] = Math.round(position[0]);
position[1] = Math.round(position[1]);
return 'translate(' + position[0] + 'px, ' + position[1] + 'px) ';
}
...
}
;
```