iPad 2 Safari показывает пиксельный HTML-текст и изображения

Мы разрабатываем приложение HTML5 + CSS3 для iPad и iPhone. Приложение отлично работает на iPad и всех iPhone, однако iPad 2 показывает объекты html dom, пикселированные при запуске, и остается таким, иногда всегда, иногда на несколько мгновений.

Приложение предназначено для прикосновений и жестов. Мы использовали translate3D для аппаратного ускорения прокрутки объектов. Мы также используем jQuery (v1.7), но созданный нами скроллер - это чистый javascript, без каких-либо фреймворков. jQuery в основном используется для поиска / добавления / удаления объектов dom и ajax. За исключением jQuery, все остальное написано собственными силами, включая плагины jQuery, которые мы используем.

Как я уже сказал, анимация достигается с помощью translate3D.Для эффектов скольжения мы изменяем значения оси x или y параметра -webkit-transform, и при получении события touchend анимация импульса достигается с помощью javascript, -webkit-transition и translate3D. В процессе написания приложения документация Apple по Safari для iOS широко используется в качестве руководства.

Несмотря на то, что приложение отлично работает на iPad, iPod Touch (2-го поколения), 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;

В приложении нет ' apple-touch-startup-image 'на данный момент, поэтому наша первая мысль заключалась в том, что ios запускает захват как-то неправильно.Но, оказывается, проблема не в этом, так как после загрузки контента по Wi-Fi пикселизация остается прежней.

Если кто-нибудь когда-либо сталкивался с этой или подобной проблемой и мог ее решить, пожалуйста, ответьте, так как других идей у ​​нас не осталось.

Я попытался предоставить как можно больше информации, и вот обещанные мною скриншоты:

iPad:

iPad Screenshot, main screen is normal

iPad 2:

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

7
задан emrahgunduz 16 December 2011 в 17:16
поделиться