在固定位置元素上缩放 div 时丢失文本清晰度（模糊）（在移动 safari / webkit 浏览器上）答案

【问题标题】：Losing text sharpness (blur) when scaling div over a fixed position element (on mobile safari / webkit browser)在固定位置元素上缩放 div 时丢失文本清晰度（模糊）（在移动 safari / webkit 浏览器上）
【发布时间】：2011-11-28 16:08:23
【问题描述】：

附上复制代码。它（基本上）包含两个 div 元素：红色（固定）和黑色（带文本）。单击黑色 div 时，它被放大并且上面的文本保持清晰。然而，在 4 秒内，黑色 div 的 z-index 发生变化，黑色 div 变为红色 div。 Boom！ 这里的文字变得模糊（这是一个大问题）。

“效果”在 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>

【问题讨论】：

标签： javascript iphone css webkit mobile-safari

【解决方案1】：

在缩放相对定位的内容时，我遇到了类似的问题，即固定位置的元素会落在相对定位的元素后面。我决心想出一个解决办法。

当我将相对定位元素改回静态时，一切都很好，但随后该元素被固定位置元素覆盖。这就是我将该元素更改为相对的原因...所以我可以在其上放置一个 z-index。

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

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

然后我在这里找到了你的帖子，并尝试了你的代码。我将包含您的代码的 HTML 文件上传到我的服务器，然后将该页面加载到我的 iPhone 中，并尝试缩放。我没有看到您的文字模糊的此类问题。够奇怪的。

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

因此，这似乎是一个错误，可能是由于内存不足或其他原因引起的。我不能 100% 确定，但如果无法如此轻松地重现该问题，可能很难向 Apple 的 iPhone/Safari 移动开发团队报告此类错误。 :\

【讨论】：

如果我可以问：您是否试图点击#main_div？点击后应该会出现模糊。这在我这边非常一致。
您好，您还有什么线索吗？我遇到了同样的问题，当我设置位置：绝对时，字体有点模糊。但是，如果文本足够长，可以让 overflow-x: scroll 起作用，字体又会变清晰。