first thoughts on rootMargin close #129

README.md

@@ -71,6 +71,10 @@ export default Ember.Component.extend(InViewportMixin, {
 ##### `viewportExited`
 This hook fires whenever the `Component` leaves the viewport.
 
+### Known Issues
+
+- `rootMargin` for IntersectionObserver does not add top and bottom outset to the root (capturing frame) with positive margins.  To get around this, ensure your sentinel is not a zero-height element.
+
 ### Advanced usage (options)
 The mixin comes with some options. Due to the way listeners and `IntersectionObserver API` or `requestAnimationFrame` is setup, you'll have to override the options this way:
 
@@ -193,11 +197,51 @@ module.exports = function(environment) {
   };
 };
 ```
-
-## Installation
-
-* `git clone` this repository
-* `npm install`
+## [**IntersectionObserver**'s Browser Support](https://platform-status.mozilla.org/)
+
+### Out of the box
+
+<table>
+    <tr>
+        <td>Chrome</td>
+        <td>51 <sup>[1]</sup></td>
+    </tr>
+    <tr>
+        <td>Firefox (Gecko)</td>
+        <td>55 <sup>[2]</sup></td>
+    </tr>
+    <tr>
+        <td>MS Edge</td>
+        <td>15</td>
+    </tr>
+    <tr>
+        <td>Internet Explorer</td>
+        <td>Not supported</td>
+    </tr>
+    <tr>
+        <td>Opera <sup>[1]</sup></td>
+        <td>38</td>
+    </tr>
+    <tr>
+        <td>Safari</td>
+        <td>Safari Technology Preview</td>
+    </tr>
+    <tr>
+        <td>Chrome for Android</td>
+        <td>59</td>
+    </tr>
+    <tr>
+        <td>Android Browser</td>
+        <td>56</td>
+    </tr>
+    <tr>
+        <td>Opera Mobile</td>
+        <td>37</td>
+    </tr>
+</table>
+
+* [1] [Reportedly available](https://www.chromestatus.com/features/5695342691483648), it didn't trigger the events on initial load and lacks `isIntersecting` until later versions.
+* [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference `dom.IntersectionObserver.enabled`.
 
 ## Running
 

tests/dummy/app/controllers/infinity-scrollable-raf.js

@@ -1,4 +1,10 @@
 import ScrollableController from './infinity-scrollable';
 
 export default ScrollableController.extend({
+  init() {
+    this._super(...arguments);
+    this.viewportToleranceOverride = {
+      bottom: 200
+    }
+  },
 });

tests/dummy/app/styles/app.css

@@ -1,3 +1,8 @@
+// BASE
+a.active {
+  color: magenta;
+}
+
 .my-component {
   display: inline-block;
   width: 300px;
@@ -29,3 +34,6 @@
   height: 500px;
   overflow: scroll;
 }
+.infinity-component, .infinity-scrollable {
+  height: 10px;
+}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,9 @@
-<h2 id="title">Welcome to Ember</h2>
+<h2 id="title">ember-in-viewport</h2>
+
+<ul>
+  <li>{{link-to "Infinity IntersectionObserver" "infinity"}}</li>
+  <li>{{link-to "Infinity Scrollable IntersectionObserver" "infinity-scrollable"}}</li>
+  <li>{{link-to "Infinity Scrollable rAF" "infinity-scrollable-raf"}}</li>
+</ul>
 
 {{outlet}}

tests/dummy/app/templates/infinity-scrollable-raf.hbs

@@ -9,9 +9,10 @@
     {{/each}}
   </ul>
   {{my-component
-    class="infinity-scrollable-rAF"
+    class="infinity-scrollable-rAF infinity-scrollable"
     viewportSpyOverride=true
     viewportIntersectionObserverOverride=false
+    viewportToleranceOverride=viewportToleranceOverride
     scrollableAreaOverride=".list-rAF"
     infinityLoad=(action "infinityLoad")}}
 </div>