一、低版本Android下input有CSS3动画会让输入框失去焦点,解决办法是低版本Android下去掉全部CSS3动画。
.ua-ios .ipt{-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;-ms-transition:all .5s;transition:all .5s}
.ua-oldAndroid .ipt {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}ios
二、-webkit-user-modify: read-write-plaintext-only; 做用是去掉输入框聚焦时候的白色背景 ;
可是这里有一个问题,Android4.0以上的系统,当软键盘激活出来的时候read-write-plaintext-only的输入框不会居中在屏幕中间,这里须要根据实际状况进行取舍。
三、translate3d可让IOS启用硬件渲染,动画效果会更加流畅,基本上能解决全部抖动;但在Android下带来新的问题——只要页面里面有节点拥有transform属性,输入框都会不正常(聚焦不正常、输入时上下抖动等),此外还会致使节点渲染变慢(如点击出下啦菜单渲染缓慢)。
再次强调CSS3的动画、投影在Android下尽可能避免。
.ua-ios .mail-list .list-item,
.ua-ios .menu-item,
.ua-ios .menu-split{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}web
四、Android 2.3.7 下不加透明border,会致使溢出隐藏失效。
.atts .att-preview{overflow:hidden;width:50px;height:50px;border:1px solid transparent;}
五、IOS下fixed定位(好比框架顶部提示信息),当键盘收起的时候会有残影:fixed元素不会随着键盘收起而移动到页面顶部,而是保持在页面中间,须要hack改为绝对定位。
.frame-tips{position:fixed;z-index:30;left:0;top:0}
.ua-ios .frame-tips{position: absolute}框架
六、在iPad1等低版ios下,opacity和其余属性一块儿改变,会致使transition中重复执行三次,因此要么只改变opacity实现淡入淡出,要么只改变非opacity属性。
.mRead-reply .btn{position:absolute;right:0;top:0;/*opacity:0;*/overflow:hidden;display:block;width:64px}动画
七、在Android4.1下,若是textarea聚焦的时候,其高度或者其兄弟节点的高度产生变化,那么textarea就会被软键盘挡住而不会自动调整位置,这里须要去掉全部效果,默认显示输入框展开状态。因此Android下尽可能不要在textarea和input上作动画。
八、Android下div的高度设置成100%,同时设置其overflow:auto;那么滚动条就会出如今这个div上面。
这个时候会出现抖动,因此建议Android下页面的滚动能且只能出如今body节点上面!