Account for subject borders (#166) fixes #165

Uses offsetWidth / offsetHeight to calculate the size of the principal box of the subject which includes borders.

demo/view-timeline/index.html

@@ -52,6 +52,7 @@
   }
 
   #target {
+    box-sizing: border-box;
     background-color:  rgba(0, 0, 255, 0.5);
     display:  inline-block;
     flex:  none;
@@ -63,6 +64,10 @@
     height: 650px;
   }
 
+  #target.borders {
+    border: 25px solid #e0c58b;
+  }
+
   #container.rtl > #target,
   #container.ltr > #target {
     height:  90%;
@@ -133,6 +138,8 @@
   <br>
   <input type="checkbox" name="subject-size" id="taller-than-scrollport-subject">
   <label for="taller-than-scrollport-subject">Taller than scrollport subject</label>
+  <input type="checkbox" name="subject-borders" id="subject-has-borders">
+  <label for="subject-has-borders">Subject has borders</label>
 </body>
 <script src="../../dist/scroll-timeline.js"></script>
 <script type="text/javascript">
@@ -206,6 +213,13 @@
             target.classList.remove('taller');
           }
           break;
+        case 'subject-borders':
+          if(event.target.checked) {
+            target.classList.add('borders');
+          } else {
+            target.classList.remove('borders');
+          }
+          break;
       }
 
       createAnimations();

src/scroll-timeline-base.js

@@ -481,14 +481,14 @@ export function calculateRange(phase, container, target, axis, optionsInset) {
   if (axis == 'x' ||
       (axis == 'inline' && horizontalWritingMode) ||
       (axis == 'block' && !horizontalWritingMode)) {
-    viewSize = target.clientWidth;
+    viewSize = target.offsetWidth;
     viewPos = left;
     if (rtl)
       viewPos += container.scrollWidth - container.clientWidth;
     containerSize = container.clientWidth;
   } else {
     // TODO: support sideways-lr
-    viewSize = target.clientHeight;
+    viewSize = target.offsetHeight;
     viewPos = top;
     containerSize = container.clientHeight;
   }