Use absolute positioning for the Composer on Safari (#2660)

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');
+      });
+    }
   }
 
   /**

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

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')
+  );
+}

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