From e467f74631332cc68359e16442ae502b7e9fe24d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 31 Mar 2018 09:36:29 -0700
Subject: [PATCH] fix intersection observer bug in firefox

---
 routes/_components/compose/ComposeBox.html | 38 +++++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index e72bbc5..bac78b1 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -113,10 +113,7 @@
     oncreate() {
       let realm = this.get('realm')
       if (realm === 'home') {
-        this.__stickyObserver = new IntersectionObserver(entries => {
-          this.set({sticky: !entries[0].isIntersecting})
-        })
-        this.__stickyObserver.observe(this.refs.sentinel)
+        this.setupStickyObserver()
       } else if (realm !== 'dialog') {
         // if this is a reply, populate the handle immediately
         insertHandleForReply(realm)
@@ -130,9 +127,7 @@
       }, {init: false})
     },
     ondestroy() {
-      if (this.__stickyObserver) {
-        this.__stickyObserver.disconnect()
-      }
+      this.teardownStickyObserver()
     },
     components: {
       ComposeAuthor,
@@ -168,7 +163,7 @@
         // return the most private between the user's preferred default privacy
         // and the privacy of the status they're replying to
         if (replyVisibility &&
-            PRIVACY_LEVEL[replyVisibility] < PRIVACY_LEVEL[defaultVisibility]) {
+          PRIVACY_LEVEL[replyVisibility] < PRIVACY_LEVEL[defaultVisibility]) {
           return replyVisibility
         }
         return defaultVisibility
@@ -182,7 +177,8 @@
       overLimit: (length) => length > CHAR_LIMIT,
       contentWarningShown: (composeData) => composeData.contentWarningShown,
       contentWarning: (composeData) => composeData.contentWarning || '',
-      postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm
+      postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm,
+      timelineInitialized: ($timelineInitialized) => $timelineInitialized
     },
     transitions: {
       slide
@@ -214,6 +210,30 @@
           postStatus(realm, text, inReplyTo, mediaIds,
             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()
+        }
       }
     }
   }