title: font-size css3 transition is not smooth in chrome
body: <p>I've created a very simple animation for a <code>h1</code> tag, the animation uses <code>css3</code> <code>font-size</code> transition.</p>
  
  <p><a href="http://jsbin.com/oPIQoyoT/1/edit" rel="nofollow">http://jsbin.com/oPIQoyoT/1/edit</a></p>
  
  <pre><code>h1 {
      position: relative;
      width:500px;
      height: 500px;
      font-size: 3em;
      transition: font-size 0.5s ease-in;
      margin: 0 auto;
  
  }
  h1:hover {
      font-size: 4em;
  }
  </code></pre>
  
  <p>It appears to be very smooth in firefox, chrome doesn't render it properly.</p>
  
  <p>I've tried setting the position to absolute, defining width, height but none of this did really help.</p>
  
  <p>How can I make it as smooth in Chrome as in Firefox? Can you please provide a jsbin example?</p>