首页  >  文章  >  web前端  >  为什么我的 CSS 转换会导致 Chrome 页面加载时闪烁?

为什么我的 CSS 转换会导致 Chrome 页面加载时闪烁?

Susan Sarandon
Susan Sarandon原创
2024-10-31 05:46:02764浏览

Why Does My CSS Transition Cause Flickering At Page Load in Chrome?

消除页面加载时 CSS 过渡闪烁

问题:

CSS 过渡会引发不必要的错误页面加载期间闪烁效果,将元素从黑色过渡到指定的颜色。

原因:

当网页包含

Chrome 中的一个错误会在网页包含 时启动 CSS 转换。表格>

解决方案:
  1. 解决闪烁问题:

    添加一个空的<script>元素。标签:<pre class="brush:php;toolbar:false"><code class="html"><script> </script>
  2. 合并 <script>页脚中带有单个空格的标签:<p><strong><p>使用 SASS 或 Less:<pre class="brush:php;toolbar:false"><code class="sass">.class { @transition(color .2s); color: #000; &:hover { color: #FFFF00; } }</script>
合并诸如 SASS 或 Less 之类的预处理器来换行函数中的转换声明:

  • 附加说明:
在 https://crbug 跟踪错误进度.com/332189 和 https://crbug.com/167083。所提供的解决方案专门针对 Chrome 浏览器。

以上是为什么我的 CSS 转换会导致 Chrome 页面加载时闪烁?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn