Enabling Chrome hardware acceleration causes poor website performance

Question

I am writing a webpage using React. I implemented a swiper on the landing page using Swiper. Its slides include an image and a few text blocks, very typical.

The animation works completely fine and smooth for FireFox, Safari, Edge, etc. However, the swiping motion is very buggy in Chrome. After spending some time to figure out why, I found that the issue can be hot fixed by disabling Chrome ‘Use hardware acceleration when available’ setting option. I also tried enabling Swiper CssMode, but it is not helping.

The webpage is supposed to be smooth to public users, turning HW acceleration off is not a feasible cure. Did anyone encountered similar problems before who can give me some clue?

Another observation I have on my React page is that, upon refreshing the webpage, if I scroll down quickly to the bottom, everything down there (other page content and footer) is blank. They display correctly after 3 seconds of rendering. This problem only occurs in Chrome, with HW acceleration on as well.

<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 >

Thanks in advance.

Morfs · Answer 1 · 2023-05-19T02:53:05.617

Turns out the root cause of the problem is not from the swiper, but from the change of background image behind the swiper.

Supposingly, in my project, the background image behind the swiper change on swiper index change. However, changing background image somehow causes lags in Chrome.

The fix is to use the appropriate method to show the expected background image. The method I used is applying CSS opacity: 0; and opacity: 100; on corresponding images. As opacity is proved to have better performance than methods like display: none; and visibility: none; in terms of speed. Also, you can use will-change: opacity; to further boost the performance. This post explains the difference of the three methods.

Enabling Chrome hardware acceleration causes poor website performance

1 Answers1