Text blured during animation when content is scaled on Safari

Originator:parmodkrarora
Number:rdar://452145412 Date Originated:
Status:OPEN Resolved:
Product:Safari Product Version:Version 9.1 (11601.5.17.1)
Classification: Reproducible:
 
Text blured during animation when content is scaled on Safari

On click of Click Me button animation starts as expected but content is getting blurred while 
animation is in progress.
Blurred text also got rectified on animation end. Check above sample html file to reproduce this bug.looking for a hack or a alternative way to resolve above issue.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body {
                background-color: white;
            }
            .scaled-div {
                transform: scale(3.25);
                transform-origin: left top;
                font-size: 50px;
                border: 1px solid black;
            }

            .animation {
                transform: translateX(200px);
                transition: 5000ms ease 0ms;        
            }

            #willAnimate{
                border: 1px solid red;
            }
        </style>
    </head>

    <body>

    <div id="scaled1">
        Scaled content
        <button id="btn">Click Me</button>
        <button id="reset">reset</button>
        <div id="willAnimate">This div will animate</div>
    </div>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(event) {
            document.querySelector("#scaled1").classList.add('scaled-div');
            var btn = document.querySelector("#btn");
            btn.addEventListener("click",function(){
                var animateDiv  = document.querySelector('#willAnimate');
                animateDiv.classList.add('animation');
            });

            var reset = document.querySelector("#reset");
            reset.addEventListener("click",function(){
                var animateDiv  = document.querySelector('#willAnimate');
                animateDiv.classList.remove('animation');
            })

        });
    </script>
    </body>

</html>


http://stackoverflow.com/questions/43534564/text-blured-during-animation-when-content-is-scaled-on-safari

Comments


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!