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.







你可能感兴趣的:(javascript)