サイドスクロール画像のゆっくりとレンダリング

Question

私のリアクションアプリ内：

画像を含むリアクションコンポーネントのサイドスクロールスライダーがあります。ユーザーは標準のoverflow: scroll CSSメカニズムを使用して左右にスクロールすることができます。

ビューポートが狭く、ユーザーがすばやくスクロールすると、ビューにスライドする要素は、レンダリングされるまでに目に見えないほどの時間が見えません。私は物事のリアクションサイドが何かを再レンダリングするのを防ぐように努力しました、そして、コンポーネントが再レンダリングしないようです。これはではなく、は問題を解決しました。リアクトコンポーネントによってレンダリング

CSS

.sliderContainer { 
    overflow: hidden 
} 

.slider { 
    display: flex; 
    height: 400px; 
    overflow-x: scroll; 
} 

HTML：：

私のコードは多少このようなものです

<div class="sliderContainer"> 
    <div class="slider"> 
    // this contains many (20+) components similar to this: 
     <div class="contentComponent"> 
      <img class="contentImage" /> 
      <img class="authorImage" /> 
      <p>some text</p> 
     </div> 
    </div> 
</div> 

だから私の質問はこれです：
速い側 - をいスクロールすると常にスクロールするアイテムがゆっくりとレンダリングされますか？そうでない場合、何がこの効果を引き起こす可能性がありますか？どのように防止できますか？

Answer 1

私は、この問題の解決策を見つけた： Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div

は、私が「再描画」ではなく「再描画」を検索する必要がありました。

より多くの流体のスクロールを可能とするソリューションは、以下のCSSプロパティDIV .sliderを与えることです：

transform: translateZ(0);