Chrome letter dancing when use css-transition

by ArtemFitiskin

HTML

<h1>&lt;iframe&gt;</h1>
<input type="text" name="input" placeholder="focus/blur this input" />
<ul>
    <li>this happens only in &lt;iframe&gt and <font color="red">Google Chrome</font>;</li>
    <li>if we use <i>-webkit-transform: translate3d(0,0,0)</i> property - the problem is solved, but text <a href="http://pumpshooter.com/IWffjgb4">does not render correctly</a> - letters become pixelized, so <a href="https://coderwall.com/p/z7egjg">this solution</a> is not what I'm looking for;</li>
    <li>tested on Chrome 34.0.1847.116 m / Canary 36.0.1942.0.</li>
</ul>

CSS

h1 {
    margin: 0; 
    font-size: 140px; 
}

input {
    font-size: 24px;
    width: 400px;
    -webkit-transition: 0.15s linear opacity;
    /* -webkit-transform: translate3d(0,0,0); */
}

input:focus {
    opacity: 0.5;
}