Safari on iOS 7 中Element.getClientRects的Bug

时间:2022-12-21 07:54:29

在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,这个是没有问题的。

Safari on iOS 7 中Element.getClientRects的Bug

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

Safari on iOS 7 中Element.getClientRects的Bug

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

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

Safari on iOS 7 中Element.getClientRects的Bug

我觉得这个是一个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的更多相关文章

  1. iOS开发中捕获Crash 发送Bug邮件

    在开发过程中,我们有时候会留下Bug,用户在使用我们的app 的时候,有时会出现闪退,这时候我们可以让用户给我们发送邮件,以让我们开发人员更加快速的地位到Bug的所在,以最快的时间解决,同时也提高用户 ...

  2. iOS开发中的一些细节BUG的解决

    这篇博客里我将不定期更新自己遇到的一些细节上的BUG,并提供解决方法,遇到同样问题的童鞋们可以参考交流一下. 1.关于tableView的tableHeaderView 请注意,我这里说的是table ...

  3. ios开发中的小技巧

    在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新. UITableView的Group样式下顶部空白处理 //分组列表头部空白处理 UIView *view = [[UIViewal ...

  4. 关于 iOS 10 中 ATS 的问题

    本文于 2016 年 11 月 28 日按照 Apple 最新的文档和 Xcode 8 中的表现进行了部分更新. WWDC 15 提出的 ATS (App Transport Security) 是 ...

  5. iOS UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  6. 关于 iOS 10 中 ATS &sol; HTTPS &sol;2017 问题

    本文于 2016 年 11 月 28 日按照 Apple 最新的文档和 Xcode 8 中的表现进行了部分更新. WWDC 15 提出的 ATS (App Transport Security) 是 ...

  7. iOS开发中使用&lbrack;&lbrack;UIApplication sharedApplication&rsqb; openURL&colon;&rsqb;加载其它应用

        iOS 应用程序之间(1)  在iOS开发中,经常需要调用其它App,如拨打电话.发送邮件等.UIApplication:openURL:方法是实现这一目的的最简单方法,该方法一般通过提供的u ...

  8. iOS开发中遇到的一些问题及解决方案【转载】

    iOS开发中遇到的一些问题及解决方案[转载] 2015-12-29 [385][scrollView不接受点击事件,是因为事件传递失败] // //  MyScrollView.m //  Creat ...

  9. iOS 把图片从Mac本地添加到iOS Simulator中

    [把图片从Mac本地添加到iOS Simulator中] 1. 把图片从Mac本机拖动到iOS Simulator中: 2. iOS Simulator会自动打开Safari去打开对应的图片,然后你用 ...

随机推荐

  1. Maven入门详解

    什么是Maven Maven,鼎鼎大名,在今天之前,我对于它一直是处于一种"只闻其名不见其人"的状态.之所以说"只闻其名",是因为Maven太有名了,它是Apa ...

  2. 第十章 MySQL 常用函数

    第十章 MySQL 常用函数 第一节:日期和时间函数 1,CURDATE() 返回当前日期:2,CURTIME() 返回当前时间:3,MONTH(d) 返回日期 d 中的月份值,范围是 1~12 第二 ...

  3. Python &lbrack;Leetcode 342&rsqb;Power of Four

    题目描述: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Examp ...

  4. hdoj 1863 畅通工程

    并查集+最小生成树 畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. 为什么jQuery要返回jQuery&period;fn&period;init对象

    作者:zccst jQuery = function( selector, context ) { // The jQuery object is actually just the init con ...

  6. Java如何转换protobuf-net中的bcl&period;DateTime对象

    一.定义DateTime Message 参考文档:https://github.com/mgravell/protobuf-net/blob/master/src/Tools/bcl.proto m ...

  7. 2019年华南理工大学程序设计竞赛(春季赛)-C-六学家的困惑

    题目链接:https://ac.nowcoder.com/acm/contest/625/C 题意:给定两个字符串,每次只能从两个字符串的两端取字符,求依次取字符后所构成的数字最大为多少. 思路:思路 ...

  8. SP8093 JZPGYZ - Sevenk Love Oimaster 解题报告

    SP8093 JZPGYZ - Sevenk Love Oimaster 题目大意 给定\(n(n\le 10000)\)个模板串,以及\(m(m\le 60000)\)个查询串(模板串总长\(\le ...

  9. kettle中使用JavaScript的一个例子

    最近在使用kettle的时候遇到一个问题,需要对输入的一个字段进行格式化,逻辑比较复杂(需要做替换掉指定的字符串,然后将数字部分不足四位的数前边补0等操作),kettle中没有提供直接的插件来支持复杂 ...

  10. 如何创建自己的python包

    写过python的人都知道python最方便也最牛的地方就是它有无数的第三方lib可以直接拿来使用,可以让编写代码变的更容易. 长用的安装第三方lib的方法有easy_install和pip,这两个的 ...