From fc096cfecff78f7a066f1802e9497705c3c44cfd Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mg.hain@gmx.de>
Date: Sat, 30 Aug 2014 14:39:49 +0200
Subject: [PATCH] Fix live dev highlight being out of place in edge cases

---
 src/LiveDevelopment/Agents/RemoteFunctions.js | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js
index ddda39f76f3..d09d7a0a736 100644
--- a/src/LiveDevelopment/Agents/RemoteFunctions.js
+++ b/src/LiveDevelopment/Agents/RemoteFunctions.js
@@ -71,13 +71,21 @@ function RemoteFunctions(experimental) {
     }
 
     // compute the screen offset of an element
-    function _screenOffset(element, key) {
-        var bounds = element.getBoundingClientRect();
-        if (key === "offsetLeft") {
-            return bounds.left + window.pageXOffset;
+    function _screenOffset(element) {
+        var elemBounds = element.getBoundingClientRect(),
+            body = window.document.body,
+            offsetTop,
+            offsetLeft;
+
+        if (window.getComputedStyle(body).position === "static") {
+            offsetLeft = elemBounds.left + window.pageXOffset;
+            offsetTop = elemBounds.top + window.pageYOffset;
         } else {
-            return bounds.top + window.pageYOffset;
+            var bodyBounds = body.getBoundingClientRect();
+            offsetLeft = elemBounds.left - bodyBounds.left;
+            offsetTop = elemBounds.top - bodyBounds.top;
         }
+        return { left: offsetLeft, top: offsetTop };
     }
 
     // set an event on a element
@@ -114,8 +122,9 @@ function RemoteFunctions(experimental) {
             }
 
             // compute the position on screen
-            var x = _screenOffset(this.element, "offsetLeft");
-            var y = _screenOffset(this.element, "offsetTop") + this.element.offsetHeight;
+            var offset = _screenOffset(this.element),
+                x = offset.left,
+                y = offset.top + this.element.offsetHeight;
 
             // create the container
             this.body = document.createElement("div");
@@ -239,9 +248,11 @@ function RemoteFunctions(experimental) {
             
             highlight.className = HIGHLIGHT_CLASSNAME;
             
+            var offset = _screenOffset(element);
+
             var stylesToSet = {
-                "left": _screenOffset(element, "offsetLeft") + "px",
-                "top": _screenOffset(element, "offsetTop") + "px",
+                "left": offset.left + "px",
+                "top": offset.top + "px",
                 "width": elementBounds.width + "px",
                 "height": elementBounds.height + "px",
                 "z-index": 2000000,