投稿

Chrome下修复元素fixed后几率触发元素偏移1或2像素的解决方案

Vedu • • 程序开发 • 阅读 2040

存在的问题

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一起使用是个不错的习惯。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/5888.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2017-09-17 07:55
下一篇 2017-09-17 17:16

相关推荐

发表评论

登录后才能评论