github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-01 15:28:40 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: ensures scrolls work in chat when touch is on text (#30817)

Browse Source 
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.
This commit is contained in:
Joffrey JAFFEUX 2025-01-16 13:02:23 +01:00 committed by GitHub
parent 41bf8ddfd0
commit f28eb5b0dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
plugins/chat/assets/javascripts/discourse/lib/chat-ios-hacks.js
View File

@ -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;
}
}