欢迎使用CSDN-markdown编辑器

web前端bug收集

问题一

问题描述：

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

<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://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=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://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. 2.设置css，html,body{height:100%;overflow:auto;margin:0;}