title: Chrome Font appears Blurry
body: <p>It's doing my eyes in!</p>
  
  <p>looks fine in IE and Firefox</p>
  
  <p><img src="https://i.stack.imgur.com/E678e.png" alt="enter image description here"></p>
  
  <p>Chrome(Above)</p>
  
  <p>Running version 39 of chrome,
  only appears blurry in a modal box, does not make any difference if I change the font family.</p>
  
  <p>This is the CSS (for label "Start") the browser renders the following</p>
  
  <pre><code>box-sizing: border-box;
  color: rgb(85, 85, 85);
  cursor: default;
  display: block;
  float: left;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 600;
  height: 24px;
  line-height: 17.142858505249px;
  margin-bottom: 0px;
  margin-top: 0px;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  position: relative;
  text-align: right;
  visibility: visible;
  width: 89.65625px;
  </code></pre>
  
  <p>Is it the browser or CSS?</p>
  
  <p>--UPDATE---</p>
  
  <p>Ok looks like its this CSS</p>
  
  <pre><code>.md-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 50%;
      max-width: 630px;
      min-width: 320px;
      height: auto !important;
      z-index: 2000;
      visibility: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translateX(-50%) translateY(-50%); &lt;--- This line
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  }
  </code></pre>
  
  <p>However if I take it out my modal no longer centres?</p>