From 8af3f1b6e4ba9eb1cee177889e3dcda7bd5c93a5 Mon Sep 17 00:00:00 2001 From: Nolan Lawson 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 5fdbef88..a13cdf22 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 00000000..83110df9 --- /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