title: Chrome css transform scale/font-size issue
body: <p>CSS</p>
  
  <pre><code>.checkbox label:after {
      content: '';
      clear: both;
      display: table;
  }
  
  .checkbox .cr {
      display: table-cell;
      position: relative;
      border: 1px solid #a9a9a9;
      border-radius: .25em;
      width: 4vw;
      height: 4vw;
  }
  
  .checkbox .cr .cr-icon {
      position: absolute;
      font-size: 1.5vw;
      line-height: 0;
      top: 2vw;
      left: 1.2vw;
  }
  
  .checkbox label input[type="checkbox"] {
      display: none;
  }
  
  .checkbox label input[type="checkbox"] + .cr &gt; .cr-icon {
      transform: scale(3) rotateZ(-20deg);
      opacity: 0;
      transition: all .3s ease-in;
  }
  
  .checkbox label input[type="checkbox"]:checked + .cr &gt; .cr-icon {
      transform: scale(2) rotateZ(0deg);
      opacity: 1;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="checkbox"&gt;
      &lt;label&gt;
          &lt;input type="checkbox" value="" checked&gt;
          &lt;span class="cr"&gt;&lt;i class="cr-icon fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>External CSS</p>
  
  <p><a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="nofollow noreferrer">https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</a></p>
  
  <p>I have a custom css checkbox. Suppose when I narrow down the screen width, the size of checkbox and the tick sign will be decreased in scale.</p>
  
  <p>It works fine in IE no matter how small of the screen size is and the tick could be very very small in scale which is expected. The problem is in Chrome, the tick sign will be overflow when the screen width is very small.</p>
  
  <p>I've set up JSFiddle <a href="https://jsfiddle.net/7fuL1zh3/5/" rel="nofollow noreferrer">https://jsfiddle.net/7fuL1zh3/5/</a>
  Hope someone could give me a hand THANKS.</p>