diff --git a/framework/core/js/src/forum/ForumApplication.js b/framework/core/js/src/forum/ForumApplication.js index 041b21275..b39fcb7a7 100644 --- a/framework/core/js/src/forum/ForumApplication.js +++ b/framework/core/js/src/forum/ForumApplication.js @@ -16,6 +16,7 @@ import NotificationListState from './states/NotificationListState'; import GlobalSearchState from './states/GlobalSearchState'; import DiscussionListState from './states/DiscussionListState'; import ComposerState from './states/ComposerState'; +import isSafariMobile from './utils/isSafariMobile'; export default class ForumApplication extends Application { /** @@ -138,6 +139,12 @@ export default class ForumApplication extends Application { m.redraw(); } }); + + if (isSafariMobile()) { + $(() => { + $('.App').addClass('mobile-safari'); + }); + } } /** diff --git a/framework/core/js/src/forum/components/Composer.js b/framework/core/js/src/forum/components/Composer.js index 360539ae2..1ab1ea951 100644 --- a/framework/core/js/src/forum/components/Composer.js +++ b/framework/core/js/src/forum/components/Composer.js @@ -265,7 +265,10 @@ export default class Composer extends Component { this.animateHeightChange().then(() => this.focus()); if (app.screen() === 'phone') { - this.$().css('top', 0); + // 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); this.showBackdrop(); } } diff --git a/framework/core/js/src/forum/utils/isSafariMobile.ts b/framework/core/js/src/forum/utils/isSafariMobile.ts new file mode 100644 index 000000000..a842eb2c3 --- /dev/null +++ b/framework/core/js/src/forum/utils/isSafariMobile.ts @@ -0,0 +1,13 @@ +/** + * @see https://stackoverflow.com/a/31732310 + */ +export default function isSafariMobile(): boolean { + return ( + 'ontouchstart' in window && + navigator.vendor && + navigator.vendor.includes('Apple') && + navigator.userAgent && + !navigator.userAgent.includes('CriOS') && + !navigator.userAgent.includes('FxiOS') + ); +} diff --git a/framework/core/less/forum/Composer.less b/framework/core/less/forum/Composer.less index 28f38062b..871dc1ec2 100644 --- a/framework/core/less/forum/Composer.less +++ b/framework/core/less/forum/Composer.less @@ -120,6 +120,12 @@ max-height: 100%; padding-top: @header-height-phone; + // Fixes a bug where fixed position doesn't properly work in Safari mobile + // https://github.com/flarum/core/issues/2652 + .mobile-safari & { + position: absolute; + } + &:before { content: " "; .header-background();