GetBoundingClientRect doesn't return iOS8 size information

In UIWebView

iOS there are divs in iframe

that is requested. For each div, I extract the attributes and the top, bottom, left, right, width, height of the div.

<div class="x" id="1234" data-type="web"



var divs = iframe['contentDocument'].getElementsByClassName('x');
return [], function (div) {
    return _.extend(div.getBoundingClientRect(), {
      id: div['id'],
      href: div['dataset']['href'],
      type:  div['dataset']['type']


This works fine in iOS 6 and iOS 7 and all data is present, including the calibration data from getBoundingClientRect. In iOS 8 getBoundingClientRect

only returns an empty object, but the div id and dataset fields are returned. Any ideas why and how to make it work?


source to share

1 answer

I figured out that you shouldn't be accessing the properties of the returned ClientRect

in dictionary style:

document.querySelector("#link").getBoundingClientRect()["left"] // Does not work
document.querySelector("#link").getBoundingClientRect().left    // Does work


Or, as an immediately executed function:

(function() {
  var element = document.querySelector('#link');
  var rect = element.getBoundingClientRect();
  return { left: rect.left, top:, width: rect.width, height: rect.height }; 


This implementation works for me in both iOS 7 and iOS 8.



All Articles