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