在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的更多相关文章

  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 / HTTPS /2017 问题

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

  7. iOS开发中使用[[UIApplication sharedApplication] openURL:]加载其它应用

        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. JavaPersistenceWithHibernate第二版笔记-第五章-Mapping value types-002使用@Embeddable

    一.数据库 二.代码 1. package org.jpwh.model.simple; import javax.persistence.Column; import javax.persisten ...

  2. 超级内存NVDIMM:下一代数据中心存储关键技术

    1.背景介绍 连接到互联网的设备数量不断增长,到2015年,将达到150亿之多.而数据中心的压力也随之增加,唯有采用新的技术才能进一步提升其效率和性能. 相比于HDD传统硬盘,固态硬盘大大增加了I/O ...

  3. Redis通用操作(适用于String,Hash,链表等)

    keys pattern 查询相应的key 在redis里,允许模糊查询key 有3个通配符 *, ? ,[] *: 通配任意多个字符 ?: 通配单个字符 []: 通配括号内的某1个字符 redis ...

  4. 解决Ext.form.DateField在浏览器中显示可能有问题

    解决Ext.form.DateField在浏览器中显示可能有问题,界面将会拉的很长很长.如下图:  办法: 1:设置css的长度 .x-date-menu { padding-top:2px;padd ...

  5. python学习--抓取一个网页上图片

    #!/bin/python # download_pic.py # download picture import os import sys from urllib.request import u ...

  6. [原]Water Water Search Problems&#39; Set~Orz【updating...】

    [HDU] [POJ] 作者:u011652573 发表于2014-4-30 10:39:04 原文链接 阅读:30 评论:0 查看评论

  7. java socket编程基础

    1. [代码]读操作Runable 1 package com.hrd.test.socket; import java.io.BufferedReader; import java.io.IOExc ...

  8. phpStorm中ftp的配置与使用

    小结:很方便,支持ftp功能和比较. 扩展,可以查看远程文件和日期

  9. 【转载】Redis的一些使用场景

    看了一些文章,关于Redis的使用场景,觉得挺好的.Redis肯定远远不止作为缓存而使用.Redis更像是一个实现很好的数据结构服务器,通过TCP栈协议提供服务.下面进行详细描述. http://da ...

  10. WP7 MD5加密

    WP7不支持MD5加密,在网上找了一个实现MD5加密的算法. //Copyright (c) Microsoft Corporation. All rights reserved. using Sys ...