Edge jankyの非同期スクロール（APZ）と問題あり。 IEまたは他のブラウザにはありません

Question

スクロールリスナーによって調整されたエッジブラウザは、特定のdivのジャンクを引き起こします。このジャンクはIE、Chrome、Opera、Firefoxでは発生しません。 Firefoxがjankingはありませんが

、それはスクロールリスナーが最初に採用されている検出されたときには、コンソールにフラグを立て、それが解明のために、このページに私を指示します。

https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects

非同期スクロールモデルで

、視覚的なスクロール位置がコンポジスレッドで更新 あり、uに見える：記事は、私はエッジで抱えている問題の正確なdesciptionように思われるものについて説明しDOM内で スクロールイベントが更新されてメインスレッドで発生する前に、この は、実装されたエフェクトが、ユーザがスクロール位置を見るのに少し遅れることを意味します。これにより、 への影響が遅れたり、ジャッキーになったり、不安定になることがあります。要するに、避けたいものです。

それだけ（位置：スティッキー）が最初にある2つのソリューション、提供しています限られたブラウザのサポートを持っているし、そして（スクロールスナッピング）の第二は、Web標準から削除されました。さらに到達

は、私はその開発チームによってエッジでAPZ（非同期パン&ズーム）の良い記事を発見しました：

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#ahrEuFu6fybJ1uwj.97

にAPZをオンにする方法があった場合、それは理想的であると私はそれを回避する方法を見つけることができません。しかし、Firefoxは実装しても問題はありませんが、Edgeの実装には非常に問題があります。特に、スティッキーをサポートしていないためです。

この問題を回避する別の方法はありますか？それは問題です。

Answer 1

スクロール可能なエレメントを別のエレメントの内側にラップし、ラッパーエレメントを独自のレイヤーに強制的に挿入し、最後に別のダミーの位置固定エレメントをそのラッパーの内側に追加することによって、エッジを強制的にAPZの実装をオフにすることができます。

あなたのHTMLはそうのように次のようになります。

// Wrapper element, forced into it's own layer with translateZ. 

<div id="wrapper_element" style="transform: translateZ(0);"> 

    // Dummy position fixed element to force APZ off. 
    <div style="top: 0px; width: 1px; height: 1px; position: fixed; z-index: 1;"></div> 

    // Your current scrollable element. 
    <div id="your_scrollable_element"> 

     // Your content 

    </div> 

</div> 

これはあなたの問題を解決する必要があります。