在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;
});
Safari on iOS 7 中Element.getClientRects的Bug的更多相关文章
-
iOS开发中捕获Crash 发送Bug邮件
在开发过程中,我们有时候会留下Bug,用户在使用我们的app 的时候,有时会出现闪退,这时候我们可以让用户给我们发送邮件,以让我们开发人员更加快速的地位到Bug的所在,以最快的时间解决,同时也提高用户 ...
-
iOS开发中的一些细节BUG的解决
这篇博客里我将不定期更新自己遇到的一些细节上的BUG,并提供解决方法,遇到同样问题的童鞋们可以参考交流一下. 1.关于tableView的tableHeaderView 请注意,我这里说的是table ...
-
ios开发中的小技巧
在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新. UITableView的Group样式下顶部空白处理 //分组列表头部空白处理 UIView *view = [[UIViewal ...
-
关于 iOS 10 中 ATS 的问题
本文于 2016 年 11 月 28 日按照 Apple 最新的文档和 Xcode 8 中的表现进行了部分更新. WWDC 15 提出的 ATS (App Transport Security) 是 ...
-
iOS UIWebView中javascript与Objective-C交互、获取摄像头
UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...
-
关于 iOS 10 中 ATS / HTTPS /2017 问题
本文于 2016 年 11 月 28 日按照 Apple 最新的文档和 Xcode 8 中的表现进行了部分更新. WWDC 15 提出的 ATS (App Transport Security) 是 ...
-
iOS开发中使用[[UIApplication sharedApplication] openURL:]加载其它应用
iOS 应用程序之间(1) 在iOS开发中,经常需要调用其它App,如拨打电话.发送邮件等.UIApplication:openURL:方法是实现这一目的的最简单方法,该方法一般通过提供的u ...
-
iOS开发中遇到的一些问题及解决方案【转载】
iOS开发中遇到的一些问题及解决方案[转载] 2015-12-29 [385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Creat ...
-
iOS 把图片从Mac本地添加到iOS Simulator中
[把图片从Mac本地添加到iOS Simulator中] 1. 把图片从Mac本机拖动到iOS Simulator中: 2. iOS Simulator会自动打开Safari去打开对应的图片,然后你用 ...
随机推荐
-
Maven入门详解
什么是Maven Maven,鼎鼎大名,在今天之前,我对于它一直是处于一种"只闻其名不见其人"的状态.之所以说"只闻其名",是因为Maven太有名了,它是Apa ...
-
第十章 MySQL 常用函数
第十章 MySQL 常用函数 第一节:日期和时间函数 1,CURDATE() 返回当前日期:2,CURTIME() 返回当前时间:3,MONTH(d) 返回日期 d 中的月份值,范围是 1~12 第二 ...
-
Python [Leetcode 342]Power of Four
题目描述: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Examp ...
-
hdoj 1863 畅通工程
并查集+最小生成树 畅通工程 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
-
为什么jQuery要返回jQuery.fn.init对象
作者:zccst jQuery = function( selector, context ) { // The jQuery object is actually just the init con ...
-
Java如何转换protobuf-net中的bcl.DateTime对象
一.定义DateTime Message 参考文档:https://github.com/mgravell/protobuf-net/blob/master/src/Tools/bcl.proto m ...
-
2019年华南理工大学程序设计竞赛(春季赛)-C-六学家的困惑
题目链接:https://ac.nowcoder.com/acm/contest/625/C 题意:给定两个字符串,每次只能从两个字符串的两端取字符,求依次取字符后所构成的数字最大为多少. 思路:思路 ...
-
SP8093 JZPGYZ - Sevenk Love Oimaster 解题报告
SP8093 JZPGYZ - Sevenk Love Oimaster 题目大意 给定\(n(n\le 10000)\)个模板串,以及\(m(m\le 60000)\)个查询串(模板串总长\(\le ...
-
kettle中使用JavaScript的一个例子
最近在使用kettle的时候遇到一个问题,需要对输入的一个字段进行格式化,逻辑比较复杂(需要做替换掉指定的字符串,然后将数字部分不足四位的数前边补0等操作),kettle中没有提供直接的插件来支持复杂 ...
-
如何创建自己的python包
写过python的人都知道python最方便也最牛的地方就是它有无数的第三方lib可以直接拿来使用,可以让编写代码变的更容易. 长用的安装第三方lib的方法有easy_install和pip,这两个的 ...