【转】淘宝UED上关于chrome的transition闪烁问题的解决方案
最近在用BetterScroll实现一个功能的时候,在滚动区域中会有一个绝对定位的按钮,结果在IOS中出现了快速滚动,停止的时候,会先消失后显现的问题,所以查找了相关的文章,发现是transition的问题,下面是转发的一篇介绍该问题的文章,作为记录,仅供参考。
作者:饶总真坏
链接:https://www.cnblogs.com/raoyunxiao/p/4173254.html
来源:博客园
前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了这个问题,正好研究解决下…
问题主要集中于淘宝首页吊顶以及左侧服务栏处,鼠标移过整个页面会闪动一次,Refresh和Reopen无法重现,只有当首次打开淘宝首页才会出现…
问题重现:
如果想查看此问题请访问jsfiddler
问题定位:
我的第一感觉是鼠标移动时触发了某些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-transform:translate3d(0,0,0); 开启硬件加速
- -webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏)
- -webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D)
【转】淘宝UED上关于chrome的transition闪烁问题的解决方案的更多相关文章
- 淘宝UED上关于chrome的transition闪烁问题的解决方案
前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了 ...
- 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
今天看到淘宝ued博客的左侧导航菜单的动画好,要使用jQuery和css3我做一个简单的示例,主要用途是实现jQuery 事件和css3 transition属性. 个元素来实现鼠标滑动到某个导航的背 ...
- 淘宝ued - 前端智勇大闯关(第三季)答案(更新)
淘宝ued - 前端智勇大闯关(第三季)答案(更新) 下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下.附上题目地址: http://ued.campus.alibaba ...
- 淘宝网站上的 HTTP 缓存问题两则
在阅读本文前推荐你先阅读我的前两篇文章< 扼杀 304,Cache-Control: immutable>和<关于缓存和 Chrome 的“新版刷新”>:下面要说的两个问题是在 ...
- 双飞翼布局介绍-始于淘宝UED
仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...
- Android仿淘宝继续上拉进入商品详情页的效果,使用双Fragment动画切换;
仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
- 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。
前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...
- 淘宝付邮试用Chrome桌面提醒插件(含源码)
淘宝付邮试用每天都会推出10元邮费试用的商品,有些对自己还是有用的.试用一下还不错,关键是便宜.不过,有些商家也抓住了买家贪便宜的特点,推出廉价垃圾商品.这里,大家还是慧眼识别了.每天浏览这些商品会很 ...
- 转载淘宝UED响应十日谈
响应式十日谈:楔子 响应式十日谈第一日:使用 rem 设置文字大小
随机推荐
- NER
写在前面:在初学nlp时的第一个任务——NER,尝试了几种方法,cnn+crf.lstm+crf.bert+lstm+crf,毫无疑问,最后结果时Bert下效果最好. 1.关于NER: NER即命名实 ...
- js人民币转大写
<input type="text" oninput="OnInput (event)" value="1234567"> &l ...
- 顺序队列与链式队列--C语言实现
关于队列,因为我自己在平时使用不多,所以在这里直接将队列的两种存储方式放在一起,作为一篇随笔,这两份代码均可直接运行,亲测.注释写的应该也算比较详细了,就不过多的解释了 顺序队列 #include&l ...
- Semaphore回顾
用途 在多线程访问可变变量时,是非线程安全的.可能导致程序崩溃.此时,可以通过使用信号量(semaphore)技术,保证多线程处理某段代码时,后面线程等待前面线程执行,保证了多线程的安全性.使用方法记 ...
- std::unique_ptr的用法
std::ofstream("demo.txt") << 'x'; // 准备要读的文件 { std::unique_ptr<std::FILE, decltyp ...
- luogu P4064 [JXOI2017]加法
题目描述 可怜有一个长度为 n 的正整数序列 A,但是她觉得 A 中的数字太小了,这让她很不开心. 于是她选择了 m 个区间 [li, ri] 和两个正整数 a, k.她打算从这 m 个区间里选出恰好 ...
- 智能家居CC2530功率放大组网RFX2401C和AT2401C的区别
两者最大的区别就是RFX2401C的增益为12dbmAT2401C的增益为14dbm这就会导致AT2401C的功耗会比RFX2401C大一点点,但距离也会相对更远,并且增加了EDS防静电等级,多出2个 ...
- 蓝牙5.0芯片NRF52810和NRF52832可进行mesh组网
提供智能化mesh照明解决方案,在现有传统灯具的基础上,插入NRF52832/52810的照明Mesh模块,可以迅速升级现有的传统灯具,配合手机APP和服务器系统,使每一盏灯成为物联网的一个智能节点, ...
- Pandas学习(三)——NBA球员薪资分析
欢迎加入python学习交流群 667279387 学习笔记汇总 Pandas学习(一)–数据的导入 pandas学习(二)–双色球数据分析 pandas学习(三)–NAB球员薪资分析 pandas学 ...
- CSS_实现京东购物车静态页面
主页面分配: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...