0

When i use css3-transition property in iframe, text are transforming! Got any idea how to resolve it?

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/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;
            }
        </style>
    </head>
    <body>
        <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 does not render correctly - 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>
    </body>
</html>

Fiddle here: http://jsfiddle.net/ArtemFitiskin/2VLvV/9/

Artem Fitiskin
  • 637
  • 6
  • 17

1 Answers1

1

Adding -webkit-backface-visibility: hidden; will fix this problem. I ran into this before.

CSS:

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

DEMO HERE

Ruddy
  • 9,795
  • 5
  • 45
  • 66
  • @ArtemFitiskin What about it? – Ruddy Apr 16 '14 at 12:16
  • pixilize and torn edges (i'm looking on windows 7 now) – Artem Fitiskin Apr 16 '14 at 12:18
  • @ArtemFitiskin Just how it works, when its on a plan background like that you will see it. Hard to see elsewhere. – Ruddy Apr 16 '14 at 12:20
  • I would like to, but no. It's very bad to looks. If you use custom font and colored design or text shadows. I'm reach this on the page when every letter got that problem on 14px font-size :-( – Artem Fitiskin Apr 16 '14 at 12:26
  • @ArtemFitiskin Not sure then, this does solve the problem but as you said don't look to good. I don;t know of another way to do it. – Ruddy Apr 16 '14 at 12:27
  • @ArtemFitiskin As far as I know this is the best we got. [**Other question**](http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition) Try them but I'm pretty sure they do the same thing. If you find a better way drop me a comment and let me know. – Ruddy Apr 16 '14 at 12:35
  • I've tried this before asking a question. Thank for your involvement, @Ruddy! If there is I'll let you know. – Artem Fitiskin Apr 16 '14 at 13:19