在ipad和iphone safari的divs的单/子像素失准 [英] Single/sub pixel misalignment of divs on ipad and iphone safari
问题描述
我有以下情况，我需要一些帮助...
I've got the following situation, and I need some help...
- 两个div，大小相同，一个在另一个之上
- 在桌面浏览器上一切正常工作
- 在iphone / ipad上，div的边框
- 这条模糊线并不总是在四个边框上。它根据div的位置而改变。它看起来是由于两个div没有正确排队的结果，但根据他们的样式设置，它们具有相同的大小和位置。
- Two divs, same size, same location, one on top of the other
- Everything works as expected on desktop browsers
- On the iphone/ipad a faint line appears around the border of the divs
- This faint line is not always on all four borders. It changes depending on the location of the divs. It looks to be happening as a result of the two divs not lining up properly, but according to their style settings, they are of identical size and location.
您可以在此处查看结果： http://www.thoughtartistry.com
You can see the results here: http://www.thoughtartistry.com
任何想法？
推荐答案
我在最近的项目中有一个类似的问题，不同的背景颜色来着色移动Safari中生成的图标。问题是，当页面缩放由Safari，有一行背景颜色显示在图像周围，即使它应该已被屏蔽。我从来没有找到一种方法来防止背景颜色的泄漏，当页面缩小。这显然是移动Safari的算法中的一个错误，重新计算背景和掩码。我找到了一个解决方法：我把一个大纲与元素的父元素的背景颜色相同的元素。轮廓在元素之外，因此掩盖了部分渗出。如果你的元素的父类有一个图案背景是剧烈的，这将不会很好，但如果它是一个纯色，它会做得很好。
I had a similar problem in a recent project where I had background image masks with different background color to colorize the resulting icons in mobile Safari. The problem was that when the page was scaled down by Safari, there was a line of the background color showing around the image, even though it should have been masked. I never found a way to prevent that leaking of the background color when the page is scaled down. It's clearly an error in mobile Safari's algorithms that recalculate the background and mask. I did find a workaround: I put an outline on the element with the same color as the background of the element's parent. The outline is outside the element and therefore masks the part bleeding out. If your element's parent has a pattern background that's drastic, this won't work that well, but if it's a solid color, it'll do just fine.
这篇关于在ipad和iphone safari的divs的单/子像素失准的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
