iPad的WebKit邊框圖像的CSS渲染問題

Question

在網站上使用邊框圖像CSS屬性是iPad上有奇怪的渲染工件（假設所有的iOS設備都有相同的問題）。它本質上是在圖像根據css進行切片的地方添加一些小線條。查看圖片作爲參考：

做某些事情會導致行消失，如放大或移動我已經應用它的div。我假設這是移動Safari中的渲染錯誤，但是有沒有人對如何解決它有任何想法/建議？

我想補充一點這個正確呈現在所有桌面瀏覽器支持的特性：Safari瀏覽器，瀏覽器，Firefox等

Answer 1

我敢肯定，如果你放大/縮小與Safari瀏覽器在桌面上的版本，你會看到同樣的問題。有時候你會縮小像素的分數，webkit並不知道如何處理子像素。

嘗試添加到你的頭：

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

這樣的默認視圖將是很好的。你也可以禁用縮放，但我不會推薦它，除非它是專門爲iPad設計的網站。

Answer 2

在縮放中完成的圖像縮放似乎會從圖像中的下一個像素中獲取噪聲（可能是舍入問題？）。向圖像部分添加一個1px的緩衝區行。

Answer 3

這一個一直困擾我們很長一段時間。

我們發現，線消失了，當我們使用拉伸而不是重複或在邊界圖像值輪：因此，例如：

-webkit-border-image: url(image.png) 50 stretch; 

您可以自己通過去測試它到您的iOs設備上的http://border-image.com/並切換拉伸參數。

（玩弄那裏的偏移值一點，因爲該網站的作者方便使用已經具有背景色在iOS設備上，你會得到的透明線的無邊框，圖像）。

Answer 4

帶邊圖像上啓用硬件加速來解決這個問題：

-webkit-transform: translate3d(0, 0, 0)