• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

修复Chrome元素fixed后几率触发元素偏移1或2像素

前端 开心洋葱 1880次浏览 0个评论

修复Chrome元素fixed后几率触发元素偏移1或2像素

存在的问题

chrome浏览器下为元素使用position fixed之后 ,触发其他动画转换 滑块或者元素缩放 旋转,被绝对/相对/固定定位的元素有几率发生偏移1或2像素让块级元素发生轻微抖动位移bug且只会在chrome中触发,为了修复它 有两个可行的方法。
解决方案1

向fixed元素添加css样式

  1. transform:translateZ(0);  
  2. -webkit-transform:translateZ(0);  

( 创建新层渲染强制调用GPU加速渲染)
/**************************************************************************/
不过在ie下会触发 “文字像素化” 和 触发动画块级抖动所以
解决方案2

  1. backface-visibility:hidden;  
  2. -webkit-backface-visibility:hidden;  

(其他兼容选项)
/**************************************************************************/
其他

使用position:fixed 时与 backface-visibility:hidde一起使用是个不错的习惯。


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明修复Chrome元素fixed后几率触发元素偏移1或2像素
喜欢 (1)

您必须 登录 才能发表评论!

加载中……