fix for Chrome IntersectionObserver bug

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)

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;
+}