移动wap隐藏的坑

非原创，只做转载

------------------------------------------------------------------------------------------------------

伪类 :active 生效

要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件

<style>

a {

  color: #000;

}

a:active {

  color: #fff;

}

</style>

<a herf=foo >bar</a>

<script>

  document.addEventListener('touchstart',function(){},false);

</script>

JS 事件相关

click 事件普遍 300ms 的延迟在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好。开发者大多数会使用封装的 tap 事件来代替 click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成

使用 CSS3 动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

部分机型存在type为search的input，自带close按钮样式修改方法

#Search::-webkit-search-cancel-button{

    display: none;

}

尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-perspective: 1000;

-moz-perspective: 1000;

-ms-perspective: 1000;

perspective: 1000;

尽可能的让动画元素不在文档流中，以减少重排

position: fixed;

position: absolute;

秒客网