Safari on iOS 7 中Element.getClientRects的Bug

在Safari浏览器中,DOMElement和Range对象都提供了getBoundingClientRect方法和getClientRects方法。顾名思义,getBoundingClientRect就是获取一个DOMElement或者Range对象的最外围的包围矩形的基于视口左上角的坐标,返回对象类型为ClientRect,getClientRects就是获取一个DOMElement或者Range对象的所有组成矩形的基于视口左上角的坐标,返回的对象类型为ClientRectList。

但是在iOS 7的Safari浏览器中,getClientRect貌似工作的有点儿问题了。

设计一个页面,上面有一个top和left均为100px的DIV,使用绝对定位。然后为了让页面产生滚动,还在比较低的地方再放置一个DIV。然后来检测DOMElement和Range对象的getBoundingClientRect和getClientRects方法的返回值。

当页面没有滚动的时候,一切都是正常的,返回的top都是100,这个是没有问题的。

 

但是当我向上滚动页面使window.scrollTop大于0的时候,这个结果就有点儿诡异了。在iPhone上的结果是这个样子的:

除了DOMElement.getBoundingClientRect返回了基于视口的坐标值,其他的返回的都是基于整个页面内容的坐标值。

在桌面Safari上,当页面产生滚动的时候,一切都是正确的:

 

我觉得这个是一个Bug,已经给Apple提交了Bug报告,但是目前尚未收到任何响应。只是用到这个API的同学们注意一下吧。

 

关键代码:

document.getElementById("d1").addEventListener("click", function(evt) {
	var s = "";
	var rect = this.getBoundingClientRect();
	s += "Element.getBoundingClientRect: <br/>left = " + rect.left + ", top = " + rect.top; 
	rect = this.getClientRects()[0];
	s += "<br/>Element.getClientRects[0]: <br/>left = " + rect.left + ", top = " + rect.top;

	var rng = document.createRange();
	rng.selectNode(this);
	rect = rng.getBoundingClientRect();
	s += "<br/>Range.getBoundingClientRect: <br/>left = " + rect.left + ", top = " + rect.top; 
	rect = rng.getClientRects()[0];
	s += "<br/>Range.getClientRects[0]: <br/>left = " + rect.left + ", top = " + rect.top;
	this.innerHTML = s;
});

 

转载于:https://www.cnblogs.com/yuanyq/p/3397182.html

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页