そこで、Prinzhorn skrollrを使用して、ページのスクロールまたはスワイプに合わせてテキストと画像が表示されるサイトを作成しています。すべて正常に動作しますが、パフォーマンスのバグを見つけたと思います。skrollr が機能する方法は、名前として数字を持つデータ属性を使用することであり、数字はアニメーションが発生するはずのポイントです。データ属性の値は CSS ルールです。
display:none画面サイズに応じて非表示または表示されるいくつかのコード ブロックを使用する必要があります。これは、データ属性の数値がモバイル画面に対して大きすぎる場合があり、アニメーションが間違ったタイミングで発生するためです。
とにかく、問題は、ブロックが に設定されている場合でも、非表示のコード ブロックの css が計算されることdisplay:noneです。
以下のコードでは、モバイル ナビゲーション ブロックの不透明度が、デスクトップの幅で Chrome の開発ツールで再計算されていることがわかります。
<nav>
<!-- === Desktop and tablet === -->
<div class="hide-for-small">
<a id="menu-btn" href="#">
<img src="/assets/img/menu-btn.png" alt="Menu" data-600="opacity:1" data-620="opacity:0" />
<img src="/assets/img/menu-btn-alt.png" alt="Menu" data-600="opacity:0" data-620="opacity:1 />
</a>
</div>
<!-- === End Desktop and tablet === -->
<!-- === Mobile === -->
<div class="show-for-small">
<a id="menu-btn" href="#">
<img src="/assets/img/menu-btn.png" alt="Menu" data-560="opacity:1" data-580="opacity:0" />
<img src="/assets/img/menu-btn-alt.png" alt="Menu" data-560="opacity:0" data-580="opacity:1" />
</a>
</div>
<!-- === End Mobile === -->
これを防ぐ方法について何か考えはありますか？私が言ったように、すべてがうまく見えてうまくいきますが、私はモバイルでいくつかの小さな遅れに気づいています.デバイスが同じ計算を2回しなければならないのはb/cだと思います.