Chrome渲染Transition时页面闪动Bug

为什么80%的码农都做不了架构师？>>>

前段时间，有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象，但是我在Mac和Win下面的Chrome都无法重现这个问题，后来重装了一遍Win7下的Chrome Beta版本，终于重现了这个问题，正好研究解决下…

问题主要集中于淘宝首页吊顶以及左侧服务栏处，鼠标移过整个页面会闪动一次，Refresh和Reopen无法重现，只有当首次打开淘宝首页才会出现…

问题定位：

我的第一感觉是鼠标移动时触发了某些JS，导致页面重新加载了一遍从而出现闪动，但是使用Chrome控制台监测Network状态，发现页面闪动并不会额外发送请求，这就排除了JS的问题。再检查下这两个地方的CSS源码：

#site-nav .menu-hd b {
…
-webkit-transition: -webkit-transform .2s ease-in;
…
}

.product-main s {
…
-webkit-transition: all .2s ease-in-out;
…
}

上述两个地方都使用了CSS3的Transition属性，那是不是这个Transition导致的问题？由于Refresh和Reopen页面都无法重现，只有当首次打开淘宝首页才会出现，最便捷的办法就是使用Fiddler的Auto Responder功能来在线调试代码，于是我尝试将CSS代理到本地并去除-webkit-transition: all .2s ease-in-out;属性，关闭浏览器后再次访问淘宝首页发现问题解决了，反向恢复属性后执行上述操作，Bug再次重现…看来我好像找到原因了，但是为什么是它？

寻找解决方案：

Google关键字“Chrome transition blink”和“Chrome transition bug”发现网上已经有很多人注意到这个问题，推测为Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：

-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）

转载于:https://my.oschina.net/jsan/blog/109360

Chrome渲染Transition时页面闪动Bug相关推荐

Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端 ...
前端性能优化必备技能 - 利用 Chrome Dev Tools 进行页面性能分析
背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
处理ios软键盘弹起和收起时页面滚动问题
处理ios软键盘弹起和收起时页面滚动问题背景: 在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移 b ...
使用chrome调试微信/QQh5页面
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 文章目录 1 前言 2 debugx5.qq.com 3 手机连接电脑并打开开发者选项和USB调试 ...
使用onmouseover 与onmouseout导致页面闪动的解决办法
使用onmouseover 与onmouseout导致页面闪动的解决办法问题描述: 解决办法: 问题出现的原因: 问题描述: 在Node节点上使用onmouseover 与onmouseout事件监 ...
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
后端返回html标签到前端,后端返回的HTML代码字符串怎么能自动渲染到前端页面...
前台用 form 表单的形式提交数据,后台通过 res.render(用的ejs) 可以正常渲染前端的页面,后台代码如下: router.post('/classifyadd', (req, res) ...
关于js渲染网页时爬取数据的思路和全过程（附源码）
于js渲染网页时爬取数据的思路首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...
使用 Chrome Timeline 来优化页面性能
使用 Chrome Timeline 来优化页面性能有时候,我们就是会不由自主地写出一些低效的代码,严重影响页面运行的效率.或者我们接手的项目中,前人写出来的代码千奇百怪,比如为了一个 Canvas ...

Chrome渲染Transition时页面闪动Bug

Chrome渲染Transition时页面闪动Bug相关推荐

最新文章

热门文章