Doesn't work with CSS transformations

[michbak]

Sometimes it is not possible to touch elements transformed with CSS. offsetLeft/Top/Width/Height return always original values, not the effective ones.

Element.getBoundingClientRect() will be better for that:

root.getBoundingBox = function(o) {
  if (o === window || o === document)
    o = document.body;

  var bbox = {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    scrollLeft: 0,
    scrollTop: 0,
    scaleX: 1.0,
    scaleY: 1.0
  };
  ///
  if (o === document.body) {
    bbox.height = window.innerHeight;
    bbox.width = window.innerWidth;
  } else {
    var bcr = o.getBoundingClientRect();

    bbox.width = bcr.width;
    bbox.height = bcr.height;
    bbox.x1 = bcr.left;
    bbox.y1 = bcr.top;
  }
  /// Get the scroll of container element.
  var tmp = o.parentNode;
  while (tmp !== null) {
    if (tmp === document.body) break;
    if (tmp.scrollTop === undefined) break;
    var style = window.getComputedStyle(tmp);
    var position = style.getPropertyValue("position");
    if (position === "absolute") break;
    bbox.scrollLeft += tmp.scrollLeft;
    bbox.scrollTop += tmp.scrollTop;
    tmp = tmp.parentNode;
  };
  /// Record the extent of box.
  bbox.x2 = bbox.x1 + bbox.width;
  bbox.y2 = bbox.y1 + bbox.height;
  ///
  return bbox;
};

[mudcube]

Hi michbak,

Good point, getBoundingClientRect is very well supported, no reason to rewrite the wheel ;)

I'll push these changes in a few, along with some other tweaks.