What is the equivalent of getBoundingClientRect on iPhone Mobile Safari 3?

Question

iPhone Mobile Safari seems to be missing element.getBoundingClientRect. What is the equivalent method on iPhone Mobile Safari? This method exists on the iPad.

Answer 1

For anyone looking for the ele.getBoundingClientRect().width method on iOS 3, you can use ele.offsetWidth

 if("getBoundingClientRect" in this.container) {
    this.width = this.container.getBoundingClientRect().width ;    
}else {
    this.width = this.container.offsetWidth;    //http://help.dottoro.com/ljvmcrrn.php
}

Answer 2

Edit 1: This code (webkitConvertPointFromNodeToPage) is only required for very old and out-of-date phones... see these comments.

EDIT 2: I wouldn't recommend you use this code... I recall changing it to deal with some problem with IE10 with touch zoom. I will try to remember to update the code with the fix.

Was: I think the following works on IE6+, FF3+, Safari 2+ (Desktop & Mobile), Chrome (Desktop & Android), Opera:

function offset(el) {
    var convertPoint = window.webkitConvertPointFromNodeToPage;
    if ('getBoundingClientRect' in el) {
        var
            boundingRect = el.getBoundingClientRect(),
            body = document.body || document.getElementsByTagName("body")[0],
            clientTop = document.documentElement.clientTop || body.clientTop || 0,
            clientLeft = document.documentElement.clientLeft || body.clientLeft || 0,
            scrollTop = (window.pageYOffset || document.documentElement.scrollTop || body.scrollTop),
            scrollLeft = (window.pageXOffset || document.documentElement.scrollLeft || body.scrollLeft);
        return {
            top: boundingRect.top + scrollTop - clientTop,
            left: boundingRect.left + scrollLeft - clientLeft
        }
    } else if (convertPoint) {
        var
            zeroPoint = new WebKitPoint(0, 0),
            point = convertPoint(el, zeroPoint),
            scale = convertPoint(document.getElementById('scalingEl'), zeroPoint);
        return {
            top: Math.round(point.y * -200/scale.y),
            left: Math.round(point.x * -200/scale.x)
        }
    }
}

where the following is a child of the body:

<div id="scalingEl" style="position:absolute;top:-200px;left:-200px;visibility:hidden;"></div>

Method does need some error checking (e.g. element must be in document). Scale makes it work when page zoomed, but may not be required (I did need it when testing webkitConvertPointFromNodeToPage in Windows Safari).