CSS-переходы на Android + iOS

У меня есть крошечная установка, два файла html и один javascript (http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/).

В двух html файлах есть 100% высоты и ширины div и одна ссылка (каждая ссылка указывает на другой html файл, чтобы инициировать переход).

Скрипт создает два блока div, когда начинается инициализация, d1 и d2, d1 устанавливается на текущее содержимое тела, а d2 устанавливается на целевое содержимое файлов html. Затем CSS выполняет переход между двумя div, поэтому возникает эффект слайда, и, наконец, javascript берет содержимое d2 и устанавливает его в содержимое тела, прежде чем избавиться от двух новых div.

Проблема в том, что когда начинается переход css, шрифт немного меняется (символы становятся немного больше, когда я говорю немного, я имею в виду совсем немного, но заметно). Когда переход завершится, шрифт вернется в нормальное состояние. Это создает ощущение «скачкообразного» шрифта: когда переход инициируется, вы получаете этот скачок шрифта, а затем он возвращается к своему исходному размеру.

На Android это происходит намного чаще, чем на iOS.

Я запускаю приложение с помощью Phonegap, поэтому считаю, что это веб-браузер, Cordova.

Спасибо за вашу помощь!!! Я очень надеюсь, что кто-нибудь поможет это исправить.

Я попытался установить эффекты перехода для ссылок, чтобы остановить изменение шрифта, например настройки 3D и т. Д., Мое исследование показало, что многие люди что-то говорят о помещении этих элементов на аппаратный уровень, чтобы они не размывались.

Спасибо!


person user1873468    schedule 03.12.2012    source источник
comment
Также кажется, что текст выделяется жирным шрифтом, а затем после перехода кажется, что он возвращается в нормальное состояние.   -  person user1873468    schedule 03.12.2012
comment
Я видел, как это происходило в OSX, но это потому, что OSX отображает текст с субпиксельным сглаживанием очень жирным шрифтом. Любые эффекты перехода временно отключают рендеринг субпиксельного текста, поэтому текст снова становится полужирным после завершения эффекта. Обычно решение заключается в применении -webkit-font-smoothing: antialiased. Однако iOS не поддерживает субпиксельное сглаживание шрифтов, и я сомневаюсь, что Android поддерживает то же самое.   -  person Chris Herbert    schedule 04.12.2012
comment
Привет, Крис, спасибо за это. Есть идеи, к какому элементу я применил бы этот стиль webkit? Могу ли я применить это, например, к d1 и d2 *?   -  person user1873468    schedule 04.12.2012
comment
Если хотите, можете нанести его на тело. Не думаю, что это поможет, но попробовать стоит.   -  person Chris Herbert    schedule 04.12.2012
comment
Переходы в телефонном разговоре очень глючны, не говоря уже о сторонних плагинах   -  person iOSAndroidWindowsMobileAppsDev    schedule 20.12.2012
comment
Переходы не являются сторонними плагинами. Это просто CSS-свойства.   -  person Christian Kuetbach    schedule 12.01.2013


Ответы (1)


Переходы - действительно плохая вещь в веб-просмотре Android.

Некоторые версии Android создают своего рода снимок экрана, анимируют изображение, а затем возвращаются к настоящему веб-рендеру. Вы ничего не можете с этим поделать (если вы найдете решение, добавьте комментарий или ответ).

Иногда помогает установить preserve3d или translate(0,0) на divs

person Christian Kuetbach    schedule 11.01.2013