copyleftie/pinafore
1
0
Fork 0
Code Issues Pull requests Releases Activity

fix for Chrome IntersectionObserver bug

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
routes/_utils/AsyncLayout.js
View file

@ -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)

19
routes/_utils/getRectFromEntry.js Normal file
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;
}