From 0dab1634b060077f18a741b0cf433571f3f523e9 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 8 Sep 2021 13:35:09 -0400
Subject: [PATCH] FIX: Composer height issue in Safari on iOS 15 (#14282)

---
 .../javascripts/discourse/app/lib/safari-hacks.js      | 10 ++++++++--
 .../app/pre-initializers/sniff-capabilities.js         |  5 +++++
 app/assets/stylesheets/mobile/compose.scss             |  7 +++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/safari-hacks.js b/app/assets/javascripts/discourse/app/lib/safari-hacks.js
index 1bea1a5f078..58130c3b2ff 100644
--- a/app/assets/javascripts/discourse/app/lib/safari-hacks.js
+++ b/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()) {
diff --git a/app/assets/javascripts/discourse/app/pre-initializers/sniff-capabilities.js b/app/assets/javascripts/discourse/app/pre-initializers/sniff-capabilities.js
index 80d7e4b1d6f..ed03c3cd4db 100644
--- a/app/assets/javascripts/discourse/app/pre-initializers/sniff-capabilities.js
+++ b/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;
 
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 6cbdf9b3a63..3f48200c476 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/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 {