移动 Safari 中的线条伪影 [英] Line artifacts in mobile Safari

问题描述

Safari 在我的网站上的 div 之间以一定比例呈现黑线.当它分解一个在两个不同的 div 中为按钮或其他东西切碎的图像时，它尤其糟糕.我不能在两个 div 的父级中放置 BG，因为它们是透明的 .png.有什么解决办法还是直接解决?

Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?

捕获问题，http://i.stack.imgur.com/pTLki.png

TravisO 也有同样的问题，我改变了页面的布局方式，最初它是一个有 5 行的简单表格，我删除了这些行，只使用图像和 br，仍然发生.我尝试通过 CSS 删除所有填充和边距，但很明显问题不在于浏览器渲染，而是通过重新采样浏览器将页面转换为适合屏幕的大小.您可以在以下位置查看我的损坏页面:

TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:

http://www.apinkdoor.com/show/

推荐答案

这个问题是由于移动 safari 在重新缩放背景图像以进行显示时产生的舍入错误(这是一个错误:http://openradar.appspot.com/8684766).

This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).

解决方案是将左侧右侧按钮边缘的宽度增加 1 或 2 像素.然后相应地调整您的 CSS，使您添加的 1 或 2 个像素默认不显示.

The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.

这篇关于移动 Safari 中的线条伪影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！