Мы разрабатываем приложение 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, и когда получено событие касания, анимация импульса достигается с помощью 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:
