Мы разрабатываем приложение 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 2: