1274978 - transform scale with fractional digits causes text flickering

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[gmeiner.m]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Steps to reproduce:

I'm using transform: scale(1.5); to scale a text on hover. It works very well in all browsers but in firefox the text flickers after the scaling is completed. I tried it to scale it to 2 and then it worked. It seems this problems only occurs when scaling to values with fractional digits. 


I made a simple example where you can reproduce it.

HTML:

<div class="container">
    <div class="scale">
        Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
    </div>
</div>

CSS:

.container {
    height: 300px;
    width: 300px;
    margin-left: 100px;
    margin-top: 100px;
}

div.scale {
    transition: 0.1s linear;
}

div.scale:hover {
    transform: scale(1.5);
}

CODEPEN: http://codepen.io/anon/pen/WwVZoM


Actual results:

After scaling completes the text is flickering for a few milliseconds.


Expected results:

Scaling should work as in other browsers.

Comment 1

[gmeiner.m]

Link to related stackoverflow question: http://stackoverflow.com/questions/37391507/transform-scale-firefox-text-issue/37391897#37391897

Comment 2

[Loic]

Attachment: 1274978.html