Include the offsetParents when locating the target element's position.

dist/demo.html

@@ -15,6 +15,7 @@
     <span id="target_2" style="position: fixed; right: 0;">Target #2</span>
     <span id="target_3" style="position: relative; left: 15px; width: 200px; height: 50px; border: 1px solid black; display: block">Target #3</span>
     <span id="target_4" style="position: relative; left: 50%; width: 70px; top: 50%; display: block">Target #4</span>
+    <div style="position: fixed; right: 0; bottom: 0"><span id="target_5">Target #5</span></div>
 
     <script>
         function test() {
@@ -103,6 +104,11 @@
                target: '#target_4',
                content: 'Test 4',
                color: '#57d80d'
+             },
+             {
+               target: '#target_5',
+               content: 'Test 5',
+               color: '#57d80d'
              }
             ]);
         }

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "./node_modules/.bin/rollup -c",
+    "prepare": "rollup -c",
     "build:prod": "NODE_ENV=prod ./node_modules/.bin/rollup -c",
     "release": "npm run build && npm run build:prod && npm publish --tag beta --access=public"
   },

src/MaterialWalkthrough.js

@@ -368,14 +368,29 @@ export default class MaterialWalkthrough {
     }
   }
 
+  /***
+   * Sum the offsetTop and offsetLeft of all parents
+   * @param {HTMLElement} target
+   */
+  static _position(target) {
+    let left = 0;
+    let top = 0;
+    do {
+      left += target.offsetLeft;
+      top += target.offsetTop;
+      target = target.offsetParent;
+    } while (target !== null);
+    return { left, top };
+  }
+
   // @TODO: Animate the scroll.
   /***
    * Centralize the scroll to a target.
    * @param {HTMLElement} target
    * @param {function} locateCallback
    */
   static _locateTarget(target, locateCallback) {
-    const top = target.offsetTop;
+    const { top } = MaterialWalkthrough._position(target);
     const windowHeight = window.innerHeight;
     const maxScrollValue = MaterialWalkthrough.CURRENT_DOCUMENT_HEIGHT - window.innerHeight;
 
@@ -399,10 +414,10 @@ export default class MaterialWalkthrough {
    * @private
    */
   static _renderFrame(target, renderCallback) {
-    // HAVING ISSUES WITH THIS WAY TO GET POSITION IN SOME TESTS
-     const position = { top: target.offsetTop };
-    // Using this line.
-    const { height, width, left } = target.getClientRects()[0];
+    // Use the client bounding rect that includes css translation etc.
+    const { height, width, left, top } = target.getBoundingClientRect();
+    // Adjust the top to be relative to the document
+    const docTop = top + window.pageYOffset;
 
     let holeSize = height > width ? height : width; // Catch the biggest measure
     // Adjust with default min measure if it not higher than it
@@ -417,7 +432,7 @@ export default class MaterialWalkthrough {
       marginTop: -((holeSize + MaterialWalkthrough.GUTTER) / 2) + 'px',
 
       left: (left + (width / 2)) + 'px',
-      top: (position.top + (height / 2)) + 'px',
+      top: (docTop + (height / 2)) + 'px',
     };
     dom.setStyle(MaterialWalkthrough._wrapper, positions);
     _log('WALK_LOCK', 'Positioning \n' + JSON.stringify(positions, 2));