Chrome下修复元素fixed后几率触发元素偏移1或2像素 - BINK 'BOLG Chrome下修复元素fixed后几率触发元素偏移1或2像素 - BINK 'BOLG

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

存在的问题

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

解决方案1

fixed元素添加css样式

<div class="dp-highlighter"><ol start="1" class="dp-css"><li class="alt"><span><span>transform:translateZ(0);&nbsp;&nbsp;</span></span></li><li class=""><span>-webkit-transform:translateZ(0);&nbsp;&nbsp;</span></li></ol></div>

( 创建新层渲染强制调用GPU加速渲染)

/**************************************************************************/

不过在ie下会触发 "文字像素化" 和 触发动画块级抖动所以

解决方案2

<div class="dp-highlighter"><div class="bar"></div><ol start="1" class="dp-css"><li class="alt"><span><span>backface-</span><span class="keyword">visibility</span><span>:</span><span class="string">hidden</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>-webkit-backface-<span class="keyword">visibility</span><span>:</span><span class="string">hidden</span><span>;&nbsp;&nbsp;</span></span></li></ol></div>

(其他兼容选项)

/**************************************************************************/

其他

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

 

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论