Skrollr, Safari, фиксированная позиция отстает

Question

Я играю с параллаксом в данный момент и есть вопрос:

Вот разметку

<div class="welcome"></div> 
<div class="welcome2" data-0="top: 100%;" data-1000="top: 0%;"></div> 
<div class="weclome_text"> 
    <h3 data-0="color: rgb(82,98,130);" data-1000="color: rgb(255,255,255);">Hello World</h3> 
    <div class="scroll-button" data-0="opacity: 1;" data-300="opacity: 0;"></div> 
</div> 

И CSS:

html,body { margin: 0; padding: 0; font-family: Sans-serif; } 

body { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

.welcome { position: fixed; top: 0; width: 100%; height: 100%; background: url(http://justdade.com/t/bg1.png) no-repeat; background-size: cover; } 
.welcome2 { position: fixed; top: 100%; width: 100%; height: 100%; background: url(http://justdade.com/t/bg2.png) no-repeat; background-size: cover; } 

.weclome_text { 
    position: fixed; position: fixed; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; width: 120px; height: 120px; color: #526282; 
    text-align: center; 
} 
.scroll-button { background: url(http://justdade.com/t/scroll-button.png); width: 60px; height: 60px; cursor: pointer; margin: 0 auto; } 

JSFiddle

Все кажется хорошо во всех браузерах, ожидающих Safari (рабочий стол, iOS тоже хорошо)

Прокрутка анимации сафари довольно тяжелая, после того как я нажимаю стрелку «прокрутки». Я также заметил, что задержки прокрутки начинаются, только если я использую позицию: fixed;

Может быть, кто-то может дать мне ключ, где я должен копать?

спасибо.

Answer 1

Хорошо, поэтому я не уверен, в чем проблема. Но после множества поисковых запросов я нашел решение. И это:

div { -webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;-webkit-perspective: 1000; } 

Я знаю, что это не лучший способ. Но он подходит для меня. По-видимому, это активирует аппаратное ускорение в браузере Safari, и анимация работает как шарм.

Я также использую

data-0="transform: translate(0%,0%)" data-1200="transform: translate(0%, -100%)" 

Принадлежит к Prinzhorn. Вместо top: 0; наверх: 100;