iphone - iPad webkit border-image css渲染问题

Question

在网站上使用 border-image css 属性会在 iPad 上产生奇怪的渲染伪像(假设所有 ios 设备都有同样的问题)。它本质上是在根据 css 对图像进行切片的位置添加小行。请参阅图像作为引用:

做某些事情会导致线条消失，例如放大或移动我应用它的 div。我假设这是移动 safari 中的渲染错误，但有人对如何修复它有任何想法/建议吗？

我可能会补充说，这在所有支持该属性的桌面浏览器中都能正确呈现:safari、chrome、firefox 等。

Answer 1

我很确定如果您在桌面版上使用 Safari 进行放大/缩小，您会遇到同样的问题。有时您会放大部分像素，而 webkit 并不知道如何处理这些子像素。

尝试添加到你的头上:

<meta name="viewport" content="initial-scale=1">

这样默认 View 会很好。您也可以禁用缩放，但我不会推荐它，除非它是专门为 iPad 设计的网站。