Я работаю над слайд-шоу script, который использует переходы CSS3 или анимацию jQuery, когда они недоступны. Я создал пользовательскую функцию для анимации слайдов, которая делает это соответственно. Казалось, что все работает нормально, но во время тестирования я попал в крупную проблему.
По той или иной причине существует большая задержка с использованием jQuery CSS до и после перехода на большие слайд-шоу. Например, слайд-шоу в приведенной ниже ссылке имеет ширину около 9900 пикселей (ширина контейнера, большая часть которой скрыта). Контейнер маневрирует, чтобы отобразить соответствующий слайд, используя переход CSS3 и свойства преобразования. Задержка происходит с использованием CSS между строками 75 - 82 в пасте ниже. В частности, применение "переходного" CSS вызывает проблему. Добавьте "переход" CSS в таблицу стилей (вместо того, чтобы применять его с JS), и задержка исчезнет. Однако это не совсем решение, потому что мы хотим использовать переходы CSS3 только для определенных свойств, которые могут меняться (использование "все" в таблице стилей приведет к переходу на некоторый CSS, который мы не хотим оживлять, но регулярно меняем).
Функция анимации: http://pastebin.com/9wumQvrP
Демонстрация слайд-шоу: http://www.matthewruddy.com/demo/?p=2431
Реальная проблема с iOS, когда слайд-шоу (и даже браузер иногда) становится полностью непригодным для использования. Я не могу точно определить какие-либо ошибки и действительно исчерпал свои знания по отладке JS. Я уверен, что это связано с этим разделом функции после игры немного, а отключение поддержки CSS3 внутри плагина полностью устраняет проблему полностью.
Я полностью застрял и очень ценю любую помощь, которую любой может дать.
--- Редактировать ---
Я пробовал применять CSS с собственной Javascript, а не функцией jQuery.css. Те же результаты, не лучшие результаты. Также стоит отметить, что это вообще не происходит в Firefox, и, похоже, это проблема только с браузерами Webkit.
Любой, у кого есть решение, с удовольствием сделает пожертвование на несколько сортов пива! Я действительно не могу понять это!
--- Второе редактирование ---
Хорошо, поэтому была отладка, и я вижу, что замедление вызвано циклом перерисовки браузера, который занимает очень много времени. Есть ли лучший способ справиться с этим так, как он это делает? Позиционирование элемента абсолютно - это известный способ сокращения ретрансляции, но это не работает, потому что слайд-шоу является отзывчивым. Абсолютное позиционирование слайд-изображений или самих слайдов вызывает его сбой.
--- Третий Редактировать ---
Через день, и я добился определенного прогресса. Добавление "перехода: все 0s легкость" в таблицу стилей элементов CSS избавился от перерисовки, вызванной добавлением встроенного свойства перехода CSS с помощью пользовательской функции анимации, упомянутой в исходном сообщении. Это приводит к значительному увеличению производительности, особенно при удалении встроенного свойства перехода CSS при завершении самого перехода.
Хороший материал! Тем не менее, теперь по-прежнему наблюдается замедление при удалении встроенного CSS-перевода (который использовался для создания самого ускоренного переходного эффекта аппаратного обеспечения) после перехода, и применяется левое позиционирование. Когда они происходят вместе, происходит замедление.
Разбирая их на две отдельные задачи (перевод удаляется, а левая позиция добавляется в setTimeout без определенного времени), снова избавляется от коэффициента repaints = performance gain и выглядит, как проблема решена. Но иногда свойство перехода CSS не сбрасывается достаточно быстро, и удаление перевода становится анимированным. Нехорошо, и не знаю, где искать рядом с ним.
