title: Rounding CSS Subpixels on transforms
body: <p>So, this issue has come up before, like here: <a href="https://stackoverflow.com/questions/24393224/translate-canvas-blurry-text">Translate + Canvas = Blurry Text</a>
  and here: <a href="https://stackoverflow.com/questions/18257132/is-it-possible-to-snap-to-pixel-after-a-css-translate">Is it possible to &quot;snap to pixel&quot; after a CSS translate?</a></p>
  
  <p>There doesn't seem to be any conclusions on either of those links—or any other articles I've read. Some responders didn't think it was important enough to care, so here is why in my situation it is: <img src="https://i.stack.imgur.com/CZ9Zs.png" alt="Screenshot in Chrome 41.0.2272.104"><em>Screenshot in Chrome 41.0.2272.104</em></p>
  
  <p><img src="https://i.stack.imgur.com/3TbG3.png" alt="Screenshot in Safari 8.0.4 (10600.4.10.7)"><em>Screenshot in Safari 8.0.4 (10600.4.10.7)</em></p>
  
  <p>See the loss in detail in Safari? (look at the structure in the space-shuttle image, or the detail in the rocks in the 3rd image)</p>
  
  <p>The CSS for these guys is</p>
  
  <pre><code>width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  </code></pre>
  
  <p>So, in some of these situations—the translateY will end up in a half pixel. The first image on the left ends up with a transform matrix like so:</p>
  
  <pre><code>-webkit-transform: matrix(1, 0, 0, 1, 0, -56.5);
  </code></pre>
  
  <p>At the current time, it seems chrome is rendering this nicely (i've seen some folks say different browsers create the issue in different versions), but currently Safari is having the issue. So, my assumption to fix this issue is to make sure that there are only whole pixels, which I've already done by doing the math and applying the transform in javascript, but this costs more in performance time when running on a lot of images.</p>
  
  <p>I've tried a few CSS-only hacks like using scale3d with no success. If anyone has any JS-free solutions, I would much appreciate the shared knowledge.</p>