wap站bug小结

问题一：

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

 解决方法：

1.可在其子元素统一添加和其相同的属性

2.在其自身添加webkit-backface-visibility:hidden属性。（webkit-backface-visibility:hidden为隐藏被旋转的 div 元素的背面）

问题二：

使用touch事件时，android和iOS对touchend事件的响应处理方式不一致。比如：在a标签上使用touchend触发一个弹层显示，在android的浏览器上a标签上实现滑动手指操作，手指离开后，不会触发touchend事件，同样的操作在iOS上则会触发touchend事件。

解决方法：

var isSlide = false;

$("a").bind("touchstart",function(){

isSlide = false;

});

$("a").bind("touchmove",function(){

isSlide = true;

});

$("a").bind("touchend",function(){

if(isSlide) return;

});

问题三：

iOS修复了 css position:fixed 1像素抖动的bug，不过却引出了另一个bug，当给某元素添加position:fixed属性，在首次加载页面的时候此元素会随着页面的滚动而滚动。

解决方法：

为此元素添加-webkit-transform：translate3d(0,0,0)属性即可

问题四：

在WAP下，常常会用到disply：table这个属性，当容器显示为table之后里面的元素会以表格的形式呈现，当有列是多行而有的是一行的时候在有些手机下一行的部分会以多行多形式呈现。问题的原因在哪里还不确定，但是解决方法找到列，给不要换行的部分加一个word-break: break-all属性即可。

问题五：

placeholder在某些低端安卓手机上设置了text-align:right无效。

解决方法：

在input::input-placeholder里设置direction:rtl，可以达到文本text-align:right的效果。