From f28eb5b0dced09f77d6dc24ae0c8828acce6b615 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 16 Jan 2025 13:02:23 +0100
Subject: [PATCH] FIX: ensures scrolls work in chat when touch is on text
 (#30817)

The stacking context fix we use in chat to avoid:
https://bugs.webkit.org/show_bug.cgi?id=262287 was causing this weird
behavior in chat where the scroll event wouldn't fire when the finger is
on text and not an empty area of the scrollable div.

This simplified implementation seems to work reliably and avoids the
issue.
---
 .../discourse/lib/chat-ios-hacks.js           | 30 +++++--------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/lib/chat-ios-hacks.js b/plugins/chat/assets/javascripts/discourse/lib/chat-ios-hacks.js
index 683f14c90b1..ba3d948a2a5 100644
--- a/plugins/chat/assets/javascripts/discourse/lib/chat-ios-hacks.js
+++ b/plugins/chat/assets/javascripts/discourse/lib/chat-ios-hacks.js
@@ -1,34 +1,20 @@
-import { next, schedule } from "@ember/runloop";
-import discourseLater from "discourse/lib/later";
 import { capabilities } from "discourse/services/capabilities";
 
 // since -webkit-overflow-scrolling: touch can't be used anymore to disable momentum scrolling
 // we use different hacks to work around this
 // if you change any line in this method, make sure to test on iOS
 export function stackingContextFix(scrollable, callback) {
-  if (capabilities.isIOS) {
-    scrollable.style.overflow = "hidden";
-    scrollable
-      .querySelectorAll(".chat-message-separator__text-container")
-      .forEach((container) => (container.style.zIndex = "1"));
-  }
-
   callback?.();
 
   if (capabilities.isIOS) {
-    next(() => {
-      schedule("afterRender", () => {
-        scrollable.style.overflow = "auto";
-        discourseLater(() => {
-          if (!scrollable) {
-            return;
-          }
+    // stores scroll position otherwise we will lose it
+    const currentScroll = scrollable.scrollTop;
 
-          scrollable
-            .querySelectorAll(".chat-message-separator__text-container")
-            .forEach((container) => (container.style.zIndex = "2"));
-        }, 50);
-      });
-    });
+    const display = scrollable.style.display;
+    scrollable.style.display = "none"; // forces redraw on the container
+    scrollable.offsetHeight; // triggers a reflow
+    scrollable.style.display = display;
+
+    scrollable.scrollTop = currentScroll;
   }
 }