[英]Skrollr, Safari, fixed position lags
我現在正在玩視差並遇到問題:
這是標記
<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; }
在所有瀏覽器中,一切似乎都可以,期待Safari(桌面,iOS也可以)
按“滾動”箭頭后,Safari滾動動畫相當滯后。 我也注意到只有當我使用position:fixed時才會啟動滾動滯后;
也許有人可以給我任何線索,我應該挖?
謝謝。
好的,所以我不確定問題究竟是什么。 但經過大量的谷歌搜索,我找到了解決方案。 它是:
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%)"
普林佐恩的道具。 而不是頂部:0; 上:100;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.