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;
});