iPad 2 Safari顯示pixellated html文本和圖像

我們正在爲iPad和iPhone開發HTML5 + CSS3應用程序。該應用在iPad上工作正常&所有iPhones，但是，iPad 2在啓動時顯示html dom對象pixellated，並保持這樣，有時總是，有時一會兒。iPad 2 Safari顯示pixellated html文本和圖像

應用程序是專爲觸摸和手勢。我們使用translate3D進行滾動對象的硬件加速。我們也在使用jQuery（v1.7），但我們設計的滾動條是純粹的javascript，沒有框架。 jQuery主要用於查找/添加/刪除dom對象和ajax。除了jQuery，其他所有東西都是內部編寫的，包括我們正在使用的jQuery插件。

正如我所說，動畫是通過translate3D實現的。對於滑動效果，我們正在更改-webkit轉換的x或y軸值，並且在收到touchend事件時，動畫動畫通過javascript，-webkit-transition和translate3D實現。在編寫應用程序時，Apple的iOS Safari文檔被高度用作指南。

即使該應用在iPad，iPod Touch（第二代），iPhone 3gs和iPhone 4上運行良好，但在iPad 2上進行測試時，我們開始看到此像素化屏幕。最奇怪的部分是，3D加速內容是獲得像素化的唯一部分。我附上了兩個截圖，一個來自iPad，另一個來自iPad2。你可以看到我的意思（他們是在同一天的不同時間，因此內容不同，對此感到抱歉）。

主要內容（包含圖像的框）可以通過觸摸事件上下滑動。在iPad2上，只有這部分是像素化的。在滑動時，像素化保持大部分時間，但在某些測試中，它會在幾秒鐘後重置。

此外，HTML內容在這一行：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

我們開始通過CSS硬件加速，並且主滑動對象有此屬性：

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

對於閃爍打樣，圖像不在任何具有背景顏色的dom對象中，並且具有以下屬性：

-webkit-backface-visibility: hidden;

更多閃爍打樣在某些情況下，我們使用這個屬性（但在屏幕捕捉圖像的像素化的內容不具有這一分配）：

-webkit-perspective: 0;

的應用程序沒有「蘋果觸摸啓動圖像'目前，所以我們首先想到的是，創業公司抓拍ios讓人不知所措。但事實證明，這不是問題，因爲在通過wi-fi下載內容之後，像素化保持不變。

如果有人遇到過這個或類似的問題，並能解決它，請回答，因爲我們沒有其他想法了。

我試着給儘可能多的信息，我可以，這裏是我promissed截圖：

的iPad：

iPad Screenshot, main screen is normal

的iPad 2：

iPad 2 Screenshot, as you can see the main screen is heavily pixellated

來源

2011-12-16 emrahgunduz

升級到iOS 5.0.1版後，返回了像素化問題。原來這是一個iOS問題，而不是硬件（這實際上很棒）。如果有人遇到類似的問題，一個錯誤報告已經提交給蘋果，會讓你知道問題何時解決。 – emrahgunduz 2012-01-18 07:11:34

該錯誤被命名爲Safari藍調，並在iOS 5.1中修復。 – emrahgunduz 2012-03-08 12:22:00

嘗試刪除轉換並通過超時立即重新應用：

$("#sliding").css("-webkit-transform: none"); 
setTimeout(
    $("#sliding").css("-webkit-transform", "translate3d(0,0,0)") 
, 0);

來源

2011-12-16 19:50:16 Duopixel

iPad 2 Safari顯示pixellated html文本和圖像

回答

相關問題