Переходы HTML5 swipe.js css3; внеэкранная рендеринг и кеширование элементов страницы

Я создаю журнал HTML5 для планшетов и настольных компьютеров с использованием swipe.js(http://swipejs.com).

Кажется, все работает нормально. На одной странице HTML я устанавливаю рядом друг с другом элементы полноэкранного списка. Весь журнал создается в одном статическом html файле. Я могу скользить по страницам, прокручивая планшеты и используя кнопки для настольной версии (рассмотрите пример на главной странице swipe.js, но затем с полноэкранными слайдами).

Страницы расположены рядом друг с другом и имеют размеры экрана.

[ |0||1||2| .. |i-1||i||i+1| .. |n| ]

Переходы swipe.js выполняются с помощью css3, используя функцию translate3d() css. В этом случае используется аппаратное рендеринг.

На рабочем столе (Chrome, Safari, FF), iPad1 и (даже лучше на) iPad2 это имеет желаемый эффект, который я искал; гладкие переходы. Отлично! Тем не менее, на iPad3, страницы кажутся "медленными" при вводе (по переходу) в первый раз. Даже без установки фоновых изображений (только цвета) "рендеринг" перешедшей страницы считается немного "медленным"; страница создается с помощью мерцающих блоков.

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

Мой вопрос: есть ли способ контролировать внеэкранную рендеринг и кеширование, чтобы я мог принудительно (предварительно) отображать элементы страницы i-1, я + 1 (и очищать кеш для всех другие элементы страницы), чтобы ускорить рендеринг перехода?

Примечание. В нескольких темах в StackOverflow упоминается "мерцание" переходов css3. Я реализовал предложенные трюки CSS, но не буду решать свой вопрос.

-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);

Ответ 1

В итоге решение было взломом Swipejs, в котором я добавил метод "hideOthers()", установив видимость стиля на "скрытый", который выгружает страницы из аппаратной памяти:

hideOthers: function(index) {
  var i = 0;
  var el;

  for( i in this.slides ) {
      el = this.slides[i];
      if ( el.tagName == 'LI' ) {
          // Show pages i-1, i and i+1
          if ( parseInt(i) == index
             || (parseInt(i) + 1) == index
             || (parseInt(i) - 1) == index
          ) {
              el.style.visibility = 'visible';
          }
          else {
              el.style.visibility = 'hidden';
          }
      }
   }
}

.. и добавил триггер ниже в качестве последней строки в методе "слайд()"

// unload list elements from memory
var self = this;
setTimeout( function() { self.hideOthers(index); }, 100 );

Для переключения аппаратного ускорения (как упоминалось в моем вопросе выше) понадобилось только translate3d:

-webkit-transform:translate3d(0,0,0);

Вы можете найти результат (включая iScroll для вертикальной прокрутки) здесь.

Ответ 2

в отношении реквизита webkit backface/translate3d, используемого для запуска аппаратного ускорения, я прочитал, что в iOS 6+ они не работают так же, как в предыдущих версиях, и (что более важно), что аппаратное ускорение должно применяется не только к элементу, который анимируется, но и к любому элементу, который перекрывает/перекрывает его.

ссылка (не много): http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

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