fix intersection observer bug in firefox

This commit is contained in:
Nolan Lawson 2018-03-31 09:36:29 -07:00
parent 8725225b68
commit e467f74631
1 changed files with 29 additions and 9 deletions

View File

@ -113,10 +113,7 @@
oncreate() { oncreate() {
let realm = this.get('realm') let realm = this.get('realm')
if (realm === 'home') { if (realm === 'home') {
this.__stickyObserver = new IntersectionObserver(entries => { this.setupStickyObserver()
this.set({sticky: !entries[0].isIntersecting})
})
this.__stickyObserver.observe(this.refs.sentinel)
} else if (realm !== 'dialog') { } else if (realm !== 'dialog') {
// if this is a reply, populate the handle immediately // if this is a reply, populate the handle immediately
insertHandleForReply(realm) insertHandleForReply(realm)
@ -130,9 +127,7 @@
}, {init: false}) }, {init: false})
}, },
ondestroy() { ondestroy() {
if (this.__stickyObserver) { this.teardownStickyObserver()
this.__stickyObserver.disconnect()
}
}, },
components: { components: {
ComposeAuthor, ComposeAuthor,
@ -168,7 +163,7 @@
// return the most private between the user's preferred default privacy // return the most private between the user's preferred default privacy
// and the privacy of the status they're replying to // and the privacy of the status they're replying to
if (replyVisibility && if (replyVisibility &&
PRIVACY_LEVEL[replyVisibility] < PRIVACY_LEVEL[defaultVisibility]) { PRIVACY_LEVEL[replyVisibility] < PRIVACY_LEVEL[defaultVisibility]) {
return replyVisibility return replyVisibility
} }
return defaultVisibility return defaultVisibility
@ -182,7 +177,8 @@
overLimit: (length) => length > CHAR_LIMIT, overLimit: (length) => length > CHAR_LIMIT,
contentWarningShown: (composeData) => composeData.contentWarningShown, contentWarningShown: (composeData) => composeData.contentWarningShown,
contentWarning: (composeData) => composeData.contentWarning || '', contentWarning: (composeData) => composeData.contentWarning || '',
postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm,
timelineInitialized: ($timelineInitialized) => $timelineInitialized
}, },
transitions: { transitions: {
slide slide
@ -214,6 +210,30 @@
postStatus(realm, text, inReplyTo, mediaIds, postStatus(realm, text, inReplyTo, mediaIds,
sensitive, contentWarning, postPrivacyKey) sensitive, contentWarning, postPrivacyKey)
} }
},
setupStickyObserver() {
this.__stickyObserver = new IntersectionObserver(entries => {
this.set({sticky: !entries[0].isIntersecting})
})
this.__stickyObserver.observe(this.refs.sentinel)
// also create a one-shot observer for the $timelineInitialized event,
// due to a bug in Firefox where when the scrollTop is set
// manually, the other observer doesn't necessarily fire
this.observe('timelineInitialized', timelineInitialized => {
if (timelineInitialized) {
let observer = new IntersectionObserver(entries => {
this.set({sticky: !entries[0].isIntersecting})
observer.disconnect()
})
observer.observe(this.refs.sentinel)
}
}, {init: false})
},
teardownStickyObserver() {
if (this.__stickyObserver) {
this.__stickyObserver.disconnect()
}
} }
} }
} }