我用React写了一个网页。我使用Swiper在登陆页面上实现了一个swiper。它的幻灯片包括一个图像和几个文本块，非常典型。
动画工作完全罚款和顺利的火狐，Safari浏览器，边缘等。然而，滑动动作在Chrome中非常错误。在花了一些时间来找出原因后，我发现这个问题可以通过禁用Chrome的“可用时使用硬件加速”设置选项来热修复。我也试过启用Swiper CssMode，但它没有帮助。
网页应该是顺利的公共用户，关闭硬件加速不是一个可行的解决办法。以前有没有人遇到过类似的问题，谁能给予我一些提示？
我在React页面上的另一个观察是，在刷新网页时，如果我快速向下滚动到底部，那里的所有内容（其他页面内容和页脚）都是空白的。渲染3秒后，它们将正确显示。此问题仅发生在Chrome中，并且还启用了硬件加速。

<div className='Latest-Swiper Content-Container'>
  <Swiper loop={true} navigation={true} id='Latest-Swiper'
    // cssMode={true}
    observer={true}
    uniqueNavElements={false}
    onAfterInit={(swiper) => initBackground(swiper)}
    onRealIndexChange={(swiper) => updateBackground(swiper)}
    modules={[Navigation, Pagination]}
    pagination={{
      enabled: true,
      el: '.Latest-Swiper-Custom-Pagination',
      renderBullet: (index, className) => {
        return '<span class="' + className + '"></span>';
      },
    }}
  >
    {articles.map((article, index) =>
    (
      <SwiperSlide className={article.category}>
        <div className='Latest-Swiper-Title-Wrapper'>
          <p className='Latest-Swiper-Title Latest-Swiper-Title-Mobile'>{article.title}</p>
        </div>

        <div className='Latest-Swiper-Image-Wrapper'>
          {/* Post image */}
          <img className='Latest-Swiper-Image' src={'sample.jpeg'} alt='' />
        </div>

        <div className='Latest-Swiper-Desc-Wrapper'>
          {/* Desc */}
          {article.body}
        </div>
      </SwiperSlide>
    )
    )}
  </Swiper>
  <div className='Latest-Swiper-Custom-Pagination' />
</div >

先谢谢你了。