neteasewd / html5bugs Goto Github PK

meta标签里，如果initial-scale=1, maximum-scale=1 这两个不加
在coolpad(版本4.0+)、联想这种机子上 会有bug
没限定宽度的页面 也只会在屏幕左半部分显示

so:
meta标签最好要这样:<meta content="width=device-width, initial-scale=1, maximum-scale=1" user-scalable="no" name="viewport" />

• tags: -webkit-transform:rotate
• platform:mobile

描述

在抽奖动画方案中，利用中间的指针部分（指针由针头和末尾的圆组成）做旋转达到抽奖效果。动画启动肉眼可发现指针在抖动。

解决方案

图片切成只有指针的针头部分，指针末尾的圆圈跟背景奖盘是一张整体的图片，肉眼看不出来抖动

相关代码

-webkit-transition: all 3s ease-in-out 0;
-webkit-transform:rotate(360deg);

小屏幕会缩放固定宽度的元素来适应现实，在缩放过程中，比如华为手机会出现，文字段行的现象。因为图片缩放正常，于是给所有文字加背景色来hack

• tags: border-raidus
• browser: ios5, safari && webview

描述

ios5下safari 和 webview不支持bind函数

解决方案

手动添加一个shim

if(!Function.prototype.bind){
var slice = [].slice;
Function.prototype.bind = function(){
    var fn = this;
    var preArgs = slice.call( arguments, 1 );
    return function(){
      var args = preArgs.concat( slice.call( arguments ) );
      return fn.apply( context, args );
    }
}
}

用这个属性设置
-webkit-tap-highlight-color 手触摸后 高亮颜色

页面中有input，texearea元素，在focus状态下，滚动页面，position:fixed的元素定位会错误，一般会跑到中间。blur状态，再滚动页面定位会正常(bug in ios7以及以下版本，安卓下正常)。

暂时有两个办法：

• 1.在input onfucus状态下。position:absolute代替fixed http://stackoverflow.com/questions/15199072/ios-input-focused-inside-fixed-parent-stops-position-update-of-fixed-elements
• 2.需要fixed的页面都整个页面用iscroll模拟滚动条，然后absolute代替fixed

UI上看起来textarea有内阴影的情况 但是怎么设置box-shadow:none;都无法去掉
可以试试用-webkit-appearance: none;

可能原因：用了jqueryMobile.css 不确定

• tags: transform:rotate
• platform:desktop-IE10+

描述

IE10+版本做transform动画，在时间为0的情况下，监听transitionend事件无法触发

解决方案

时间设置为0.001s

相关代码

transition-duration: 0.001s;

font-size的值不起作用
解决办法，在fontsize后面跟上height和line-height
在具体的容器里再重写掉