移动web开发中的坑

仅记录自己在开发中遇到的问题，持续更新。

1. 当页面中有img标签时，需要特别注意src属性的设置。 工程中img标签的写法是：<img src="" />，在有的浏览器中（华为手机 Android4.2.2）页面会加载两次，造成比较诡异的错误。在stackoverflow上有类似的问题。

2. cookie的编码问题。 如果cookie的值为中文，那么在某些手机（华为手机 Android4.2.2）会出现乱码问题；需要在设置cookie时进行一次编码，获取时解码。

3. 注意transform、flex等比较新的css3属性的设置。 transform和-webkit-transform要一起存在；flex和-webkit-flex、-webkit-flex-box等属性也要一起存在，可以通过postcss进行设置。
   在webpack配置中，需要注意postcss的顺序：

  loader: ExtractPlugin.extract( "style", "css?minimize&-autoprefixer!postcss!sass" ) // 抽取共有的css

如果postcss放在最后，需要引入postcss-scss。

4. 尽量采用css3硬件加速。

5. 在一些比较老的手机（如：三星Note2）中，在动画前对某元素设置了display:none，但是它还是会显示；如果一定时间的延迟后再开始动画，元素可以正常的被隐藏掉。 这可能是因为浏览器性能不足，没有进行repaint操作；可以通过3D加速尝试下。