FIX: Composer height issue in Safari on iOS 15 (#14282)

app/assets/javascripts/discourse/app/lib/safari-hacks.js

@@ -98,7 +98,10 @@ function positioningWorkaround($fixedElement) {
 
   positioningWorkaround.blur = function (evt) {
     if (workaroundActive) {
-      $("body").removeClass("ios-safari-composer-hacks");
+      document.body.classList.remove("ios-safari-composer-hacks");
+      if (caps.isIOS15Safari) {
+        document.body.classList.remove("ios-safari-15-hack");
+      }
       window.scrollTo(0, originalScrollTop);
 
       if (evt && evt.target) {
@@ -188,7 +191,10 @@ function positioningWorkaround($fixedElement) {
         return;
       }
 
-      $("body").addClass("ios-safari-composer-hacks");
+      document.body.classList.add("ios-safari-composer-hacks");
+      if (caps.isIOS15Safari) {
+        document.body.classList.add("ios-safari-15-hack");
+      }
       window.scrollTo(0, 0);
 
       if (!iOSWithVisualViewport()) {

app/assets/javascripts/discourse/app/pre-initializers/sniff-capabilities.js

@@ -43,6 +43,11 @@ export default {
         (/iPhone|iPod/.test(navigator.userAgent) || caps.isIpadOS) &&
         !window.MSStream;
 
+      caps.isIOS15Safari =
+        caps.isIOS &&
+        /Version\/15/.test(navigator.userAgent) &&
+        !/DiscourseHub/.test(navigator.userAgent);
+
       caps.hasContactPicker =
         "contacts" in navigator && "ContactsManager" in window;
 

app/assets/stylesheets/mobile/compose.scss

@@ -32,6 +32,13 @@
     padding-bottom: 0px;
   }
 
+  // iOS 15 Safari has a floating address bar that displays above the composer submit bar
+  // we cannot detect its preseence, so we need to add extra padding
+  // Apple says it's a known issue, see https://bugs.webkit.org/show_bug.cgi?id=229876
+  .keyboard-visible body.ios-safari-15-hack &.open .reply-area {
+    padding-bottom: 45px;
+  }
+
   .reply-to {
     margin: 5px 0;
     .reply-details {