github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-23 06:01:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix shaky composer on safari mobile

Browse Source 
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
This commit is contained in:
Alexander Skvortsov 2021-03-12 00:23:37 -05:00
parent 4e126708e9
commit a64c39835a
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/forum/components/Composer.js
View File

@ -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();
}
}