【转】淘宝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 )
原文地址:https://www.cnblogs.com/dahe1989/p/11676835.html
- nohup命令
- 跨浏览器的剪贴板访问解决方案
- 装逼必备:大型分布式网站术语分析
- 年前爆炸一波!小程序视频功能来了!
- ubuntu13.04环境hadoop1.2.1单机模式安装
- silverlight:telerik RadControls中RadGridView的一个Bug及解决办法
- scope引起的问题
- JS正则表达式常用函数汇总
- 修改(同步)linux时间
- “爬虫”程序吃掉低价机票 高科技“黄牛”怎么破?
- javascript:json数据的页面绑定
- “刷脸”就可购物 全国首家人脸智慧时尚店亮相深圳
- testng-result中文乱码问题
- mac下环境变量、maven3.1.1 及 jdk1.7.0.45配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux设备树语法详解
- 【Mysql进阶-2】图文并茂说尽Mysql索引
- 1.8W字|了不起的 TypeScript 入门教程(第二版)
- 【Mysql进阶-3】大量实例悟透EXPLAIN与慢查询
- 基于helium自动化测试的方法进行代码仓库梳理和备份
- 【SpringBoot注解-5】web项目相关注解
- rxjs里的Observable对象如何消费
- 正则表达式入门
- (在模仿中精进数据可视化02) 温室气体排放来源可视化
- ROS机器人URDF建模
- 这是我见过最牛逼的Shell,619行代码!
- 设计模式(五):利用原型模式复制几个葫芦娃
- Vue中数组变动监听
- which命令
- 如何将tensorflow1.x代码改写为pytorch代码(以图注意力网络(GAT)为例)