Chrome浏览器下fixed元素抖动的解决方案
来源:互联网 发布:kuka机器人编程语言 编辑:程序博客网 时间:2024/06/01 14:14
首先要说明的是,这个问题并不是在所有浏览器下存在,而且也不是在所有chrome浏览器版本中存在。就目前chrome 62.0版本中,确实存在这个问题。
这个问题的现象是,首先定义了一个fixed元素(通常拥有较高的z-index),比如顶部的navbar,然后页面中又有动画元素,其动画效果会改变z-index(变为正值)。在这个动画播放的过程中,如果navbar正好覆盖,或部分覆盖了这个元素,其z轴就会发生变化。
这种变化的本质是动画在播放时,覆盖在上层的fixed元素,其Z轴位置会发生变化。动画播放完毕,Z轴位置又会恢复。从页面上来看,就是发生了抖动(z轴位置变近,也就是变为正数,会让元素看起来更大)。
解决方式很简单,强制规定fixed元素的transform要有translateZ(固定值),或者相似的属性,比如translate3d(x,y,固定值),或者matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)(注意与c相关位,即第3,7,11,15个参数为固定值)。这种情况下,fixed元素的Z位置就不会发生动态变化。这个固定值通常为0,这样不会产生放远(变小)或者放近(变大)的效果。
阅读全文
1 0
- Chrome浏览器下fixed元素抖动的解决方案
- 解决IE6浏览器下position:fixed固定定位不抖动的问题
- FIREFOX和CHROME浏览器下PercentLoaded()不能使用的解决方案
- FIREFOX和CHROME浏览器下PercentLoaded()不能使用的解决方案
- Chrome浏览器下小于12号字的解决方案
- 固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案
- 解决position:fixed 定位抖动的问题
- 踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
- position:fixed在chrome浏览器中无效
- 真正完美解决IE6下position:fixed问题的方法{使用expression()没有抖动}
- 移动端整体布局-解决ios下fixed定位抖动的问题
- chrome浏览器什么页面都打不开的解决方案
- Chrome浏览器部分手机浏览模式下元素间出现间距的问题
- chrome浏览器当鼠标碰到超链接的时候会窗口会抖动
- Chrome position:absolute 容器中嵌套的子元素position:fixed 一点bug
- chrome浏览器下的xdebug helper使用方法
- 几种解决position:fixed 抖动的方法
- uploadify在chrome下崩溃的解决方案
- VirtualBox
- JMS(一)--JMS基本概念
- Ubuntu16.04 Python 3.6安装Pytorch 0.2
- 欢迎使用CSDN-markdown编辑器
- php接口获取不到移动端访问的数据
- Chrome浏览器下fixed元素抖动的解决方案
- Element-UI分页组件连续点击后页码循环跳转问题解决方案
- 第十三周项目4-二叉排序树
- jrtplib打包发送H264
- 图像模糊度判断方法--相机对焦使用
- Intellij IDEA中使用Debug调试
- Mysql对已有数据表进行分区
- 唯快不破:TCP/IP详解--举例明白发送/接收缓冲区、滑动窗口协议之间的关系
- 第十一周 项目4 — 利用遍历思想求解图问题(6)