ipad和iphone safari上div的单/子像素不对齐

Question

我有以下情况,我需要一些帮助......

1. 两个div,相同的大小,相同的位置,一个在另一个之上
2. 一切都在桌面浏览器上按预期工作
3. 在iphone/ipad上,div的边框周围会出现一条微弱的线条
4. 这条微弱的线并不总是在所有四个边界上.它会根据div的位置而改变.由于两个div没有正确排列,它看起来正在发生,但根据它们的风格设置,它们具有相同的大小和位置.

你可以在这里看到结果:http://www.thoughtartistry.com

有任何想法吗？

Answer 1

我在最近的一个项目中遇到了类似的问题,我在其中使用了具有不同背景颜色的背景图像蒙版来为移动Safari中的结果图标着色.问题是当页面被Safari按比例缩小时,图像周围会出现一条背景颜色,即使它应该被屏蔽.当页面缩小时,我从未找到防止背景颜色泄漏的方法.在移动Safari的算法中,重新计算背景和掩码显然是错误的.我确实找到了一个解决方法:我在元素上添加了一个轮廓,其颜色与元素父元素的背景颜色相同.轮廓位于元素之外,因此掩盖部分渗出.如果你的元素的父元素具有激烈的图案背景,那么这将不会很好,但如果它是纯色,它会做得很好.

Answer 2

负边距是我发现防止这种情况的唯一方法。

例如，如果在2个div之间有水平的微距，则在第二个div上添加-1px的上边距将使其略微重叠，并且在缩放页面时该间隙不会重新出现。

在某些情况下（例如图像精灵或重复图案）可能需要更多调整，但总体思路是相同的。对于精灵，请确保在裁切边框的1个像素内没有大的颜色变化。出血永远不会超过1个像素，因此1像素的调整就足够了。

Answer 3

我会尝试使用元/视口选项，特别是将初始比例设置为 1.0 并禁用用户缩放。

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html