iscroll部分机型高度计算错误原因--transform属性

iscroll在部分手机上做下拉刷新的时候,高度会计算错误,显示为顶部部分高度被隐藏。当时使用版本是4.2.2。通过调试发现是iscroll源码的bug,在此Mark下,懒得提交Issue。

iscroll4均有这个错误,在iscroll5里面已改正,但是只是在计算高度时做了防御式编程,根本原因估计还是没找到。图方便可以直接使用iscroll5,只是api变了。不想升级,可以按我的方式稍微修改下源代码。

1. 表面原因。

     hasTransform分析出错,见源码:  

hasTransform = !!vendor,
     vendor判断是来自以下函数:

vendor = (function () {
	var vendors = 't,webkitT,MozT,msT,OT'.split(','),
		t,
		i = 0,
		l = vendors.length;

	for ( ; i < l; i++ ) {
		t = vendors[i] + 'ransform';
		if ( t in dummyStyle ) {
			return vendors[i].substr(0, vendors[i].length - 1);
		}
	}

	return false;
})(),
这里为了兼容各个浏览器的tansfrom属性,做了判断。但是有的transform属性只是简称transfrom,没有webkit前缀等,所以vendor返回'',即空字符串。!!vendor返回false,实际应该返回true.这也是部分机型或者浏览器失效的原因,因为它们支持的tansfrom属性没有前缀。

2. 根本原因,误用js判空。

     js里面 if(xx)判断为false的几个情况包括:null, 0, false, '' . 注意 最后一个是空字符串。不包括: NaN, " ", 0.0 。4.2.5版本的iscroll里面

hasTransform = !!vendor
改为了

hasTransform = vendor !== false,

依然出错,因为在和false比较之前, vendor仍然做了类似if(vendor)的默认转换。在不确定类型的时候,尽量不用if(xx)或者!!XX做判断。

3. 修改办法。

hasTransform = (typeof vendor === 'string') ? true : false,
    vendor对应前缀,只要返回字符串类型就可以了。不支持transform时,上述的vendor函数会返回false.







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值