当在固定位置的元素上缩放div时，失去文本清晰度(模糊)(在移动safari / webkit浏览器上)

附复制代码。它(基本上)包含两个div元素:红色(固定)和黑色(带文本)。当点击黑色div时，它被放大，并且上面的文本保持清晰。然而，在4秒内，黑色div的z-index改变了，黑色div变成了超过红色div。这里的文本变得模糊(这是一个大问题)。

这个"效果"在iPhone 3GS上尤其明显，在iPhone 4上则不那么明显。

问题是:是否有一个解决方案/变通方法来调整每个代码，但不是红色div代码，使黑色div上的文本将保持清晰?

我在这里有任何问题/澄清要求。

<!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>

当缩放相对位置的内容时，固定位置的元素会落在相对位置的元素后面。我决心找出一个解决办法。

当我将相对位置元素更改回静态时，一切正常，但随后该元素被固定位置元素覆盖。这就是我把这个元素改为相对的原因。所以我可以给它加一个z指数。

我还尝试动态分配位置和z-index的CSS样式，但这似乎也没有改变任何东西。

然后，我从样式表中删除了'left' CSS样式，并通过JS动态分配了'right'样式，其值等于窗口的宽度，减去固定位置元素的宽度，这似乎改善了问题，但不是100%。

然后我在这里找到了你的线程，并尝试了你的代码。我上传了一个HTML文件和你的代码到我的服务器上，然后把这个页面加载到我的iPhone上，并试着放大。我看不出你的短信被模糊了。奇怪的足够的。

然后我回到我的另一个页面，刷新，一切都很好，即使固定位置的元素落在相对位置的元素后面。

因此，这似乎是一个错误，可能是由低内存或其他原因引起的。我不能百分之百确定，但如果不能如此轻易地重现这个问题，可能很难向苹果的iPhone/Safari移动开发团队报告这样的漏洞。:

相关内容

最新更新

热门标签：