From a64c39835aba43e831209609f4a9638ae589aa41 Mon Sep 17 00:00:00 2001 From: Alexander Skvortsov Date: Fri, 12 Mar 2021 00:23:37 -0500 Subject: [PATCH] Fix shaky composer on safari mobile When the composer is opened while scrolled to the absolute bottom of the page (via hitting the "reply" button, `window.scrollTop` has a value of ~600px greater than it should. This doesn't seem to be the composer element's height (which appears to be 0 at the time). This incorrect scrollTop positions the composer off screen, which causes Safari to freak out and shake the element violently as it tries to scroll to the cursor (which is now off screen). We can get around this by calculating scrollTop ourselves. Fixes https://github.com/flarum/core/issues/2683 --- js/src/forum/components/Composer.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/src/forum/components/Composer.js b/js/src/forum/components/Composer.js index 1ab1ea9513..b509e29dd6 100644 --- a/js/src/forum/components/Composer.js +++ b/js/src/forum/components/Composer.js @@ -268,7 +268,14 @@ export default class Composer extends Component { // On safari fixed position doesn't properly work on mobile, // So we use absolute and set the top value. // https://github.com/flarum/core/issues/2652 - this.$().css('top', $('.App').is('.mobile-safari') ? $(window).scrollTop() : 0); + + // Due to another safari bug, `scrollTop` is unreliable when + // at the very bottom of the page AND opening the composer. + // So we fallback to a calculated version of scrollTop. + // https://github.com/flarum/core/issues/2683 + const scrollElement = document.documentElement; + const topOfViewport = Math.min(scrollElement.scrollTop, scrollElement.scrollHeight - scrollElement.clientHeight); + this.$().css('top', $('.App').is('.mobile-safari') ? topOfViewport : 0); this.showBackdrop(); } }