React :: 部分在上下滚动时变白
React :: Sections are turning white while Scrolling Up and Down
你们有什么快速解决办法吗?
我上下滚动的速度非常快,您可以看到有些部分变白了。请参考我下面的简短记录:
https://screencast-o-matic.com/watch/cYjuXRmdje
我正在使用 Chrome 浏览器并进行了一些研究,这似乎是因为 Chrome 中的新问题。 硬件加速,可在Chrome设置>高级>系统>“可用时使用硬件加速”中找到
关闭它可以,但在 Edge 或类似的东西中如何。
实时站点:https://hitchcliff.github.io/onepage-studio/
Github 存储库:https://github.com/hitchcliff/onepage-studio-code
我的第一个怀疑是一些 JS 运行ning 会阻止浏览器更新,在使用 chrome 开发工具后我看不到任何明显的东西。
然后我查看了页面上的图片,它们很大,有些图片超过 10mb!理想情况下(这取决于上下文)你应该让你的图像低于 100kb(最好更小!)。
我建议您 运行 通过以下工具使用所有图片:https://squoosh.app/ or https://tinypng.com/ - 我想这会解决您的问题。浏览器处理这么大的文件需要付出很多努力,因此您会看到白色区域。
从长远来看,请考虑在构建过程中引入缩小工具,以帮助实现此类自动化。
你们有什么快速解决办法吗?
我上下滚动的速度非常快,您可以看到有些部分变白了。请参考我下面的简短记录: https://screencast-o-matic.com/watch/cYjuXRmdje
我正在使用 Chrome 浏览器并进行了一些研究,这似乎是因为 Chrome 中的新问题。 硬件加速,可在Chrome设置>高级>系统>“可用时使用硬件加速”中找到
关闭它可以,但在 Edge 或类似的东西中如何。
实时站点:https://hitchcliff.github.io/onepage-studio/ Github 存储库:https://github.com/hitchcliff/onepage-studio-code
我的第一个怀疑是一些 JS 运行ning 会阻止浏览器更新,在使用 chrome 开发工具后我看不到任何明显的东西。
然后我查看了页面上的图片,它们很大,有些图片超过 10mb!理想情况下(这取决于上下文)你应该让你的图像低于 100kb(最好更小!)。
我建议您 运行 通过以下工具使用所有图片:https://squoosh.app/ or https://tinypng.com/ - 我想这会解决您的问题。浏览器处理这么大的文件需要付出很多努力,因此您会看到白色区域。
从长远来看,请考虑在构建过程中引入缩小工具,以帮助实现此类自动化。