Мерцание в моем приложении для iPad во время исчезновения

Question

Я собираю приложение / игру для iPad с Phonegap, jQuery и т. Д. Приложение состоит из разделов, и каждый раздел содержит несколько страниц.Когда я нажимаю кнопку, текущий раздел или страница исчезают, а новый - исчезает. Затухание выполняется в CSS для повышения производительности.

На одной странице у меня есть текстовое поле.Когда используется это текстовое поле, и я нажимаю на кнопку, чтобы перейти к следующему разделу, экран мерцает при исчезновении.При переходе от страницы к странице он не мерцает.

Существует также анимация на фоне 400 x 400.

Нажатие кнопки:

1. Старый потухший Div
2. Скрыть старый Div
3. Установить непрозрачность нового Div на 0
4. показать новый Div
5. Ввести новый Div

Структура примерно такая:

<div id="wrapper">
    <div id="section1">
        <span id="page1"><button>Go to page 2</button></span>
        <span id="page2">
                <button>Go to page 3</button>
                <input type="text"/>
        </span>
        <span id="page3"><button>Go to section 2</button></span>
    </div>
    <div id="section2">
        <span id="page1"><button>Go to page 2</button></span>
        <span id="page2"><button>Go to page 3</button></span>
        <span id="page3"><button>Go to section ..</button></span>
    </div>
</div>

Answer 1

Свойство backface-visibility относится к трехмерным преобразованиям. С помощью 3D-преобразований вы можете поворачивать элемент так, чтобы то, что мы считаем «передней частью» элемента, больше не было обращено к экрану. Например, это отразит элемент от экрана:

CSS

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform:    rotateY(180deg);
  -ms-transform:     rotateY(180deg);
}

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

CSS

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Демо

Answer 2

Попробуйте добавить это ко всем объектам, которые используют анимацию:

-webkit-backface-visibility: hidden;

Определяет, является ли элемент видимым, если он не обращен к экрану, и должен решить вашу проблему.