我用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 >
先谢谢你了。
1条答案
按热度按时间3hvapo4f1#
原来问题的根本原因不是来自刷卡器,而是来自刷卡器背后背景图像的变化。
假设,在我的项目中,滑动器后面的背景图像随着滑动器索引的变化而变化。然而,改变背景图像在某种程度上会导致Chrome的滞后。
修复方法是使用适当的方法来显示预期的背景图像。我使用的方法是在相应的图像上应用CSS
opacity: 0;
和opacity: 100;
。由于不透明度被证明在速度方面比display: none;
和visibility: none;
等方法具有更好的性能。此外,您可以使用will-change: opacity;
来进一步提高性能。This post解释了这三种方法的区别。