Skip to content

Commit

Permalink
Fix shaky composer on safari mobile
Browse files Browse the repository at this point in the history
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 #2683
  • Loading branch information
askvortsov1 committed Mar 12, 2021
1 parent 4e12670 commit a64c398
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion js/src/forum/components/Composer.js
Expand Up @@ -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();
}
}
Expand Down

0 comments on commit a64c398

Please sign in to comment.