fix for Chrome IntersectionObserver bug

This commit is contained in:
Nolan Lawson 2018-01-23 17:25:56 -08:00
parent 48d47160d7
commit 8af3f1b6e4
2 changed files with 22 additions and 1 deletions

View file

@ -1,4 +1,6 @@
// Use intersection observer to calculate rects asynchronously // Use intersection observer to calculate rects asynchronously
import { getRectFromEntry } from './getRectFromEntry'
class AsyncLayout { class AsyncLayout {
constructor(generateKeyFromNode) { constructor(generateKeyFromNode) {
this._onIntersectionCallbacks = {} this._onIntersectionCallbacks = {}
@ -13,7 +15,7 @@ class AsyncLayout {
observe(key, node, callback) { observe(key, node, callback) {
this._onIntersectionCallbacks[key] = (entry) => { this._onIntersectionCallbacks[key] = (entry) => {
callback(entry.boundingClientRect) callback(getRectFromEntry(entry))
this.unobserve(key, node) this.unobserve(key, node)
} }
this._intersectionObserver.observe(node) this._intersectionObserver.observe(node)

View file

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