Fix Firefox intersectionRatio bug

Author: thebuilder

src/intersection.js

@@ -123,8 +123,10 @@ function onChange(changes) {
       const options = instance.options
 
       let inView = false
-
-      if (Array.isArray(options.threshold)) {
+      if (intersectionRatio < 0 && isIntersecting) {
+        // Firefox bug, causes intersectionRatio to sometimes be less than zero if element is larger than viewport
+        inView = true
+      } else if (Array.isArray(options.threshold)) {
         // If threshold is an array, check if any of them intersects. This just triggers the onChange event multiple times.
         inView = options.threshold.some(threshold => {
           return instance.visible

stories/Observer.story.js

@@ -58,6 +58,17 @@ storiesOf('Intersection Observer', module)
       </Observer>
     </ScrollWrapper>
   ))
+  .add('Taller then viewport', () => (
+    <ScrollWrapper>
+      <Observer>
+        {inView => (
+          <Header style={{ height: '150vh' }}>
+            Header is fully inside the viewport: {inView.toString()}
+          </Header>
+        )}
+      </Observer>
+    </ScrollWrapper>
+  ))
   .add('With threshold 100%', () => (
     <ScrollWrapper>
       <Observer threshold={1} onChange={action('Child Observer inview')}>
@@ -80,6 +91,17 @@ storiesOf('Intersection Observer', module)
       </Observer>
     </ScrollWrapper>
   ))
+  .add('Taller then viewport with threshold 100%', () => (
+    <ScrollWrapper>
+      <Observer threshold={1}>
+        {inView => (
+          <Header style={{ height: '150vh' }}>
+            Header is fully inside the viewport: {inView.toString()}
+          </Header>
+        )}
+      </Observer>
+    </ScrollWrapper>
+  ))
   .add('With threshold array', () => (
     <ScrollWrapper>
       <Observer

yarn.lock

@@ -3087,9 +3087,9 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flow-bin@^0.61.0:
-  version "0.61.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.61.0.tgz#d0473a8c35dbbf4de573823f4932124397d32d35"
+flow-bin@^0.62.0:
+  version "0.62.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.62.0.tgz#14bca669a6e3f95c0bc0c2d1eb55ec4e98cb1d83"
 
 flow-copy-source@^1.2.1:
   version "1.2.1"