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"
data-href="http://x.com/foo?bar=z"></div>
JS:
var divs = iframe['contentDocument'].getElementsByClassName('x');
return [].map.call(divs, 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
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: rect.top, width: rect.width, height: rect.height };
})()
This implementation works for me in both iOS 7 and iOS 8.
source to share