Я пытаюсь получить ограничивающий прямоугольник для разных элементов. Я получаю прямоугольник для элемента, используя getClientRects, а затем рисую красный div над прямоугольником. На firefox это работает, но в хроме и сафари я получаю странные результаты. На jsfiddle на сафари это работает, но тот же самый код в сафари напрямую не так сложно показать проблему.getClientRects не работает для изображения в сафари или хроме
http://jsfiddle.net/pmnwjc33/5/
На сафари, если я пытаюсь найти ограничивающие рамки для изображения и ввода я получаю, что изображение имеет прямоугольник 8,8,8,8 для верхней части, слева, снизу, справа. Таким образом, ограничивающая рамка для изображения неверна и, похоже, сбрасывает любые ограничивающие поля после изображения. Есть ли способ сделать эту работу правильно?
Красные Коробки прямоугольники 
<html>
<body>
<input id="cart1" type=button value="AddToCart" ><br>
<img id="dogimage" src="http://www.petyourdog.com/uploads/articles/17-6.jpg">
<input id="cart2" type=button value="AddToCart2" ><br>
</body>
</html>
<script>
function addClientRectsOverlay(elt) {
console.log(elt.tagName);
// Absolutely position a div over each client rect so that its border width
// is the same as the rectangle's width.
// Note: the overlays will be out of place if the user resizes or zooms.
var rects = elt.getClientRects();
console.log(rects.length);
for (var i = 0; i != rects.length; i++) {
var rect = rects[i];
console.log(rect);
if(elt.tagName=="IMG"){
console.log(rect.top);
console.log(rect.bottom);
console.log(rect.right);
console.log(rect.left);
console.log(parseInt(rect.right)-parseInt(rect.left));
console.log(parseInt(rect.bottom)-parseInt(rect.top));
}
var tableRectDiv = document.createElement('div');
tableRectDiv.style.position = 'absolute';
tableRectDiv.style.border = '1px solid red';
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
tableRectDiv.style.top = (rect.top) + 'px';
tableRectDiv.style.left = (rect.left) + 'px';
// we want rect.width to be the border width, so content width is 2px less.
tableRectDiv.style.width = (rect.width - 2) + 'px';
tableRectDiv.style.height = (rect.height - 2) + 'px';
document.body.appendChild(tableRectDiv);
}
}
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
if(all[i].tagName!="BR"){
addClientRectsOverlay(all[i]);
}
}
</script>