怎么建卡盟网站,心得网站建设,做h5页面的网站,微信怎么做推广前言
大家都知道position: fixed用于生成绝对定位的元素#xff0c;相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。
突然发现自己之前写的网页有个小bug#xff1a;在购买页面的…前言
大家都知道position: fixed用于生成绝对定位的元素相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。
突然发现自己之前写的网页有个小bug在购买页面的结算按钮部分有个交互就是正常是基于标准文档static里流布局在购物车下方当网页监听滚轮位于上一部分会固定定位fixed出现在用户浏览器下方因为按钮有一个hover动效就会出现概率性抖动如下图 详细说明
多次测试发现抖动是概率性出现第一直觉认为是Chrome浏览器问题然后测试不同的版本也换过其他浏览器发现都有问题出现之后我把所有的盒子设置背景颜色发现一个问题眼中的实际盒子模型会高于鼠标所指的盒子模型区域一点点
有抖动 正常盒模型 这就知道了具体问题了就是这多顶出的大约1px的像素静态看似乎没问题但一旦加上一些动效就会有抖动体验很差。但因为是概率性问题突然不知道如何去解决
问题解决
尝试过可能是代码冲突于是删改了相关代码也不行突然想起以前看过一篇讲如何优化动画性能的文章里面说过一个解决抖动的方案于是尝试的加上了
-webkit-transform: translateZ(0);
transform: translateZ(0);反复的测试bug就真的解决了。
总结
一般关于css3动画性能优化有2个 尽量使用 transform 当成动画熟悉避免直接使用 height,width,margin,padding 等建议开启浏览器 GPU 硬件加速 所以我们使用tanslateZ(0)变成3d效果开启了浏览器 GPU 硬件加速提高浏览器渲染的性能上面这个因fixed定位页面元素重排重绘时盒模型bug可能是网页渲染导致的所以类似的bug或者抖动可以尝试tanslateZ(0)去解决不过这样也有缺点就是耗电和发热问题。
