在固定位置元素（在移动safari / webkit浏览器上）上缩放div时，文本锐度（模糊） [英] Losing text sharpness (blur) when scaling div over a fixed position element (on mobile safari / webkit browser)
问题描述
附加了重现代码。它（基本上）包含两个div元素：红色（固定）和黑色（具有文本）。当点击黑色div时，它被放大，其上的文本保持清晰。然而，在4秒内，黑色div的z-index变化，黑色div变成 红色div。 繁荣！此处的文字变得模糊（这是一个大问题）。
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).
效果在iPhone 3GS上尤其明显，在iPhone 4上不太引人注目。
The "effect" is especially visible on iPhone 3GS, less noticeable on iPhone 4.
：是否有解决/解决方法来调整每个代码，但不是红色div代码，以便黑色div上的文本将保持清晰？
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 was having similar issues with fixed-position elements dipping behind relative-positioned elements when zooming on the relative-positioned content. I was determined to figure out a solution.
当我将相对定位的元素改回静态时，一切都很好，但是那个元素被固定位置元素。这是我将元素更改为相对的开始为...的原因，所以我可以在它上面放一个z-index。
When I changed the relative-positioned element back to static, all was well, but then that element was being covered by the fixed position elements. This was the reason I changed that element to relative to begin with... so I could put a z-index on it.
我也试过动态分配CSS样式的位置和z-index，但是似乎没有改变任何东西。
I also tried dynamically assigning the CSS styles of position and z-index, but that didn't seem to change anything either.
然后，我从样式表中删除了'left'CSS样式，我通过JS动态地分配了一个'right'样式，值等于窗口，减去固定位置元素的宽度，这似乎改善了问题，但不是100％。
Then, I removed the 'left' CSS style from the stylesheet, and I dynamically assigned a style of 'right' via JS, with a value equal to the width of the window, minus the width of that fixed-position element, and this seemed to improve the issue, but not 100%.
然后我发现你的线程在这里，并尝试你的代码。我上传了一个HTML文件与您的代码到我的服务器，然后将这个页面加载到我的iPhone，并尝试缩放。我看不到这样的问题，你的文字模糊。足够奇怪。
Then I found your thread here, and tried your code. I uploaded an HTML file with your code to my server, then loaded that page up in my iPhone, and tried zooming around. I saw no such issues with your text being blurred. Odd enough.
所以我回到我的另一个页面，刷新，一切都很好，即使固定位置元素浸在相对定位元素的后面。
So then I went back to my other page, refreshed, and all was well, even with the fixed-position elements dipping behind the relative-positioned element.
因此，这似乎是一个错误，可能是由低内存或某事造成的。我不是100％肯定，但没有能够重现的问题这么容易，可能很难报告这样的错误，苹果的iPhone / Safari移动开发团队。 ：\
Thus, it seems this is a bug, perhaps caused by low memory or something. I'm not 100% sure, but without being able to reproduce the issue so easily, it may be hard to report such a bug to Apple's iPhone/Safari Mobile development team. :\
这篇关于在固定位置元素（在移动safari / webkit浏览器上）上缩放div时，文本锐度（模糊）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
