From 8af3f1b6e4ba9eb1cee177889e3dcda7bd5c93a5 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 23 Jan 2018 17:25:56 -0800
Subject: [PATCH] fix for Chrome IntersectionObserver bug

---
 routes/_utils/AsyncLayout.js      |  4 +++-
 routes/_utils/getRectFromEntry.js | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 routes/_utils/getRectFromEntry.js

diff --git a/routes/_utils/AsyncLayout.js b/routes/_utils/AsyncLayout.js
index 5fdbef8..a13cdf2 100644
--- a/routes/_utils/AsyncLayout.js
+++ b/routes/_utils/AsyncLayout.js
@@ -1,4 +1,6 @@
 // Use intersection observer to calculate rects asynchronously
+import { getRectFromEntry } from './getRectFromEntry'
+
 class AsyncLayout {
   constructor(generateKeyFromNode) {
     this._onIntersectionCallbacks = {}
@@ -13,7 +15,7 @@ class AsyncLayout {
 
   observe(key, node, callback) {
     this._onIntersectionCallbacks[key] = (entry) => {
-      callback(entry.boundingClientRect)
+      callback(getRectFromEntry(entry))
       this.unobserve(key, node)
     }
     this._intersectionObserver.observe(node)
diff --git a/routes/_utils/getRectFromEntry.js b/routes/_utils/getRectFromEntry.js
new file mode 100644
index 0000000..83110df
--- /dev/null
+++ b/routes/_utils/getRectFromEntry.js
@@ -0,0 +1,19 @@
+// Get the bounding client rect from an IntersectionObserver entry.
+// This is to work around a bug in Chrome: https://crbug.com/737228
+
+let hasBoundingRectBug;
+
+export function getRectFromEntry(entry) {
+  if (typeof hasBoundingRectBug !== 'boolean') {
+    const boundingRect = entry.target.getBoundingClientRect();
+    const observerRect = entry.boundingClientRect;
+    hasBoundingRectBug = boundingRect.height !== observerRect.height ||
+      boundingRect.top !== observerRect.top ||
+      boundingRect.width !== observerRect.width ||
+      boundingRect.bottom !== observerRect.bottom ||
+      boundingRect.left !== observerRect.left ||
+      boundingRect.right !== observerRect.right;
+    alert(hasBoundingRectBug)
+  }
+  return hasBoundingRectBug ? entry.target.getBoundingClientRect() : entry.boundingClientRect;
+}
\ No newline at end of file