diff --git a/app/assets/javascripts/discourse/components/site-header.js.es6 b/app/assets/javascripts/discourse/components/site-header.js.es6
index 61211e85159..85913e6a710 100644
--- a/app/assets/javascripts/discourse/components/site-header.js.es6
+++ b/app/assets/javascripts/discourse/components/site-header.js.es6
@@ -137,6 +137,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       this._isPanning = true;
       $("header.d-header").removeClass("scroll-down scroll-up");
       this.eventDispatched(this._leftMenuAction(), "header");
+      window.requestAnimationFrame(() => this.panMove(e));
     } else if (
       windowWidth - center.x < SCREEN_EDGE_MARGIN &&
       !this.$(".menu-panel").length &&
@@ -148,6 +149,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       this._isPanning = true;
       $("header.d-header").removeClass("scroll-down scroll-up");
       this.eventDispatched(this._rightMenuAction(), "header");
+      window.requestAnimationFrame(() => this.panMove(e));
     } else {
       this._isPanning = false;
     }
@@ -242,13 +244,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       }
     });
 
-    if (this.site.mobileView) {
-      $("body")
-        .on("pointerdown", e => this._panStart(e))
-        .on("pointermove", e => this._panMove(e))
-        .on("pointerup", e => this._panMove(e))
-        .on("pointercancel", e => this._panMove(e));
-    }
+    this.addTouchListeners($("body"));
   },
 
   willDestroyElement() {
@@ -260,13 +256,8 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
     this.appEvents.off("header:hide-topic");
     this.appEvents.off("dom:clean");
 
-    if (this.site.mobileView) {
-      $("body")
-        .off("pointerdown")
-        .off("pointerup")
-        .off("pointermove")
-        .off("pointercancel");
-    }
+    this.removeTouchListeners($("body"));
+
     Ember.run.cancel(this._scheduledRemoveAnimate);
     window.cancelAnimationFrame(this._scheduledMovingAnimation);
   },
diff --git a/app/assets/javascripts/discourse/mixins/pan-events.js.es6 b/app/assets/javascripts/discourse/mixins/pan-events.js.es6
index a83cffbc300..840a6aa31d8 100644
--- a/app/assets/javascripts/discourse/mixins/pan-events.js.es6
+++ b/app/assets/javascripts/discourse/mixins/pan-events.js.es6
@@ -12,37 +12,31 @@ export default Ember.Mixin.create({
 
   didInsertElement() {
     this._super(...arguments);
-
-    if (this.site.mobileView) {
-      if ("onpointerdown" in document.documentElement) {
-        this.$()
-          .on("pointerdown", e => this._panStart(e))
-          .on("pointermove", e => this._panMove(e, e))
-          .on("pointerup", e => this._panMove(e, e))
-          .on("pointercancel", e => this._panMove(e, e));
-      } else if ("ontouchstart" in document.documentElement) {
-        this.$()
-          .on("touchstart", e => this._panStart(e.touches[0]))
-          .on("touchmove", e => {
-            const touchEvent = e.touches[0];
-            touchEvent.type = "pointermove";
-            this._panMove(touchEvent, e);
-          })
-          .on("touchend", e => this._panMove({ type: "pointerup" }, e))
-          .on("touchcancel", e => this._panMove({ type: "pointercancel" }, e));
-      }
-    }
+    this.addTouchListeners(this.$());
   },
 
   willDestroyElement() {
     this._super(...arguments);
+    this.removeTouchListeners(this.$());
+  },
 
+  addTouchListeners($element) {
     if (this.site.mobileView) {
-      this.$()
-        .off("pointerdown")
-        .off("pointerup")
-        .off("pointermove")
-        .off("pointercancel")
+      $element
+        .on("touchstart", e => this._panStart(e.touches[0]))
+        .on("touchmove", e => {
+          const touchEvent = e.touches[0];
+          touchEvent.type = "pointermove";
+          this._panMove(touchEvent, e);
+        })
+        .on("touchend", e => this._panMove({ type: "pointerup" }, e))
+        .on("touchcancel", e => this._panMove({ type: "pointercancel" }, e));
+    }
+  },
+
+  removeTouchListeners($element) {
+    if (this.site.mobileView) {
+      $element
         .off("touchstart")
         .off("touchmove")
         .off("touchend")