有关web前端的两个bug问题和解决方法

web前端bug收集

问题一

问题描述：

应用css3 translate3d 平移效果后的标签元素，在ios上的safari以及app的webview中会出现页面加载完成后其子元素闪动现象，具体如下：

<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li><img src=/uploadfile/2017/1010/20171010034736562.png” ref=”https://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
</ul>

解决方法(两种)：

1、可在其子元素中统一添加和其相同的属性，具体如下：

<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li style=”-webkit-transform: translate3d(0, 0, 0); “><img src=/uploadfile/2017/1010/20171010034736562.png” ref=”https://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
</ul>

2、在其元素中添加如下属性：

-webkit-backface-visibility: hidden; (设置进行转换的元素的背面在面对用户时是否可见：隐藏)

-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现：保留 3D )

问题二：

问题描述：

chrome每次打开页面，滚动页面对于position fixed的元素会不停抖动，然而在重新应用position fixed，抖动就不存在了，或者F5刷新页面后也不会抖动

解决方法

1、给fixed元素添加css样式，可以解决抖动问题，-webkit-transform:translateZ(0)

2、设置css，html,body{height:100%;overflow:auto;margin:0;}