[Webkit-unassigned] [Bug 73316] New: Losing text sharpness (blur) when scaling div over a fixed position element (on mobile safari / webkit browser)

Tue Nov 29 06:16:27 PST 2011

https://bugs.webkit.org/show_bug.cgi?id=73316

           Summary: Losing text sharpness (blur) when scaling div over a
                    fixed position element (on mobile safari / webkit
                    browser)
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Other
               URL: http://stackoverflow.com/questions/8298696/losing-text
                    -sharpness-blur-when-scaling-div-over-a-fixed-position
                    -element-on
        OS/Version: Other
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: breakphreak at gmail.com

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>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.