FIX: float precision error in IE11

yurayavorski · Oct 12, 2018 · b0197cb · b0197cb
1 parent f2254e6
commit b0197cb
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -1,3 +1,6 @@
 # Unreleased
 
-__Nothing Yet!__
+**Changed:**
+
+- bpk-component-infinite-scroll:
+  - Changed IntersectionObserver Threshold from 1 to 0.99.
diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js
@@ -50,7 +50,7 @@ describe('withInfiniteScroll', () => {
   beforeEach(() => {
     global.IntersectionObserver = class {
       constructor(callback) {
-        intersect = async () => callback([{ intersectionRatio: 1 }]);
+        intersect = async () => callback([{ isIntersecting: true }]);
       }
       observe() {} // eslint-disable-line
       unobserve() {} // eslint-disable-line

diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js
@@ -111,7 +111,7 @@ const withInfiniteScroll = (
 
       this.props.dataSource.onDataChange(this.updateData);
       this.observer = new IntersectionObserver(this.handleIntersection, {
-        threshold: 1,
+        threshold: 0.99, // using 0.99 instead of 1 to avoid problems with float precision in IE11
       });
     }
 
@@ -194,7 +194,7 @@ const withInfiniteScroll = (
     handleIntersection = (entries: Array<IntersectionObserverEntry>) => {
       const { onScroll } = this.props;
       const entry = entries[0];
-      if (entry.intersectionRatio >= 1) {
+      if (entry.isIntersecting) {
         if (this.sentinel) {
           this.observer.unobserve(this.sentinel);
         }