Skrollr - Очень изменчивая анимация в Safari

Я строю страницу с skrollr, и она отлично работает! Я работаю так, как надо, в Chrome, Firefox и IE. Однако в Safari 6.0.5 на Mac версии 10.7.5 он очень изменчив при анимации элементов при прокрутке. В принципе, когда я прокручиваю вниз, он не оживляет ключевые кадры. Вместо этого он просто переходит к определенному ключевому кадру в зависимости от того, где я прокручивал. Я не могу понять, почему это будет сделано только в Сафари. Извините, но я не могу опубликовать ссылку на сайт из-за NDA. Любая помощь или предложения по этому вопросу будут очень признательны.Skrollr - Очень изменчивая анимация в Safari

источник

2013-10-09 Peter

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

Choppy:

<section class="scene two" data-0="transform:translate(0%,100%);" data-100p="transform:translate(0%,0%);"> 
    <div class="box" data-100p="transform:translate(0%,100%);" data-200p="transform:translate(0%,0%);"></div> 
</section>

Гладкий:

<section class="scene two" data-0="transform:translate(0%,100%);" data-100p="transform:translate(0%,0%);"></section> 

<section class="scene three" data-100p="transform:translate(0%,100%);" data-200p="transform:translate(0%,0%);"></section>

источник

2013-10-28 22:00:53 Luke

Спасибо за ваш ответ. Что я должен был сделать в Safari, это использовать -webkit-transform: translateZ (0); на элементе, который делал тяжелую анимацию, чтобы заставить аппаратное ускорение. Это позволит сделать сафари, как в 3D, и сгладить анимацию. Однако на моей странице это все испортило. Я использовал эти свойства, чтобы помочь исправить эти проблемы -webkit-backface-visibility: hidden; -webkit-перспектива: 1000; Также, если вы делаете это на элементе с использованием background-attachement: fixed; это, безусловно, испортит то, как все выглядит так, осознавая это. – Peter

@Peter спасибо, ваше предложение сделало трюк. Тем не менее, я получил * слегка * лучшие результаты с '-webkit-transform: translate3d (0,0,1px);' FWIW. Еще раз спасибо. – couzzi

Skrollr - Очень изменчивая анимация в Safari

ответ

Смежные вопросы