The repro code is attached. It (basically) contains two div elements: red (fixed) and black (with text). When clicking on the black div, it is up-scaled and the text on it stays sharp. However, in 4 seconds the z-index of the black div changes and the black div becomes to be over the red div. Boom! Here the text becomes blurry (which is a big problem). The "effect" is especially visible on iPhone 3GS, less noticeable on iPhone 4 / iPad. The question is: is there a solution/workaround to tweak every code, but not the red div code, so that the text on the black div will remain sharp? I am here for any questions / clarification requests. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1255"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script> $(function() { $("#main_div").bind("click", function() { $("#wrapper").css({"z-index": -1}); $("#main_div").css({"-webkit-transform": "scale(1.4)"}); setTimeout(function() { $("#wrapper").css({"z-index": 2}); }, 4000); return true; }); }); </script> <title>Title</title> </head> <body> <div id="wrapper" style="position: absolute; z-index: 2; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;"> <div style="position: absolute; width: 972px; height: 598px; "> <div id="main_div" style="position: relative; height: 375px; width: 610px; background-color:rgb(2,2,2); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px;"> <div style="position: relative; padding-top: 26px; padding-right: 10px; padding-bottom: 26px; padding-left: 10px; font-size: 10px; "> <div style="display: inline; font: normal normal normal 14px/normal arial; color: rgb(150, 150, 150); "> <span>Here is some TEXT</span> </div> </div> </div> </div> </div> <div style="position: fixed; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;"> <div style="position:fixed; bottom:0; right:0; width:70%; height:30%; background-color: red;"></div> </div> </body></html>
I have a bug like this, ocurs when I use preserve-3d & 3d transforms, that element become blurry. Not only fonts become blurry but also borders, background, shadows, etc. Firefox, Chrome has this problem too. If I use -webkit-filter:blur(0px); rendered element become pixelated and loses it's blur, but it's never become sharp. These problems are like my problem: https://stackoverflow.com/questions/10417890/css3-animations-with-transform-causes-blurred-elements-on-webkit https://stackoverflow.com/questions/4641522/how-to-force-re-render-after-a-webkit-3d-transform-in-safari/4847445#4847445