3

私は現在視差で遊んでいて、問題があります:

ここにマークアップがあります

<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も問題ありません）

「スクロール」矢印を押した後、Safariのスクロールアニメーションがかなり遅くなります。また、position: fixed; を使用した場合にのみスクロール ラグが発生することにも気付きました。

多分誰かが私がどこを掘るべきか手がかりを教えてくれるでしょうか?

ありがとうございました。

4

1 に答える 1

3

さて、問題が実際に何であったかはわかりません。しかし、多くのグーグルを行った後、解決策を見つけました。そしてそれは：

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;

于 2014-02-22T16:24:28.617 に答える