title: Is it possible to "snap to pixel" after a CSS translate?
body: <p>I created a modal box and vertically centred it using a <a href="http://css-tricks.com/centering-percentage-widthheight-elements/" rel="noreferrer">technique Chris Coyer mentioned</a>. The only problem I've found with it so far is that sometimes the box is offset by half a pixel, which can make some of the children look a little wonky. My question is,: is it possible to snap the result to the nearest whole pixel?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Here are a couple of pictures to better illustrate the issue. In this first image, you can see the text inputs and link underlines have rendered correctly:</p>
  
  <p><img src="https://i.stack.imgur.com/xiP6K.jpg" alt="Modal box with crisp lines"></p>
  
  <p>The second image shows the effect after the CSS transforms have been used. Notice the blur of the link underline and the incorrectly rendered text inputs.</p>
  
  <p><img src="https://i.stack.imgur.com/XbPxP.jpg" alt="enter image description here"></p>
  
  <p>Although the second image doesn't show it, occasionally I notice the top and bottom white lines wit the same blurred effect.</p>
  
  <p>For the record, the text inputs are styled using simple borders and a background colour. I've included the CSS for those inputs here so you can see there's nothing special happening:</p>
  
  <pre><code>input {
      background-color: #FFFFFF;
      border: 1px solid #CCCCCC;
      border-radius: 0;
      box-shadow: 0 1px 3px -1px #D5D5D5 inset;
      color: #4C4C4C;
      display: inline-block;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 12px;
      max-width: 100%;
      padding: 5px;
      transition: border-color 0.1s ease 0s;
  }
  </code></pre>