From c895490aa8d4f0af21a3ab8121cc1d965a3c7c2a Mon Sep 17 00:00:00 2001 From: Classic298 <27028174+Classic298@users.noreply.github.com> Date: Fri, 24 Jul 2026 05:38:18 +0200 Subject: [PATCH] fix: blank chat messages on Safari caused by content-visibility virtualization (#26805) Since v0.10.0 chat messages are virtualized with content-visibility: auto to skip rendering of off-screen messages. Safari's implementation of content-visibility has known paint bugs (WebKit bugs 277573, 281570 and 283846) that can leave the contents of a message unpainted even when it is on screen. On iOS this makes assistant responses render as empty, both in Safari and as a PWA, while the same chats render fine in Chromium and Firefox. This matches the regression window reported in #26712, which appeared when upgrading from 0.9.6 to 0.10.2. Detect Safari (including all iOS browsers, which use WebKit) with the same user agent check already used in MessageInput and ShareChatModal, and skip the virtualization class there. Safari falls back to rendering all messages like before v0.10.0, while other engines keep the optimization. Verified with a spoofed Safari user agent that messages render without the virtualization class and with content-visibility resolving to visible, while Chromium keeps content-visibility: auto. Fixes #26712 --- src/lib/components/chat/Messages/Message.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/components/chat/Messages/Message.svelte b/src/lib/components/chat/Messages/Message.svelte index 09700aabad..56b9ef9945 100644 --- a/src/lib/components/chat/Messages/Message.svelte +++ b/src/lib/components/chat/Messages/Message.svelte @@ -46,13 +46,17 @@ export let editCodeBlock = true; export let topPadding = false; export let onInsertToNote: ((content: string) => void) | null = null; + + // Safari's content-visibility implementation has paint bugs that leave + // on-screen messages blank (#26712), so skip virtualization there + const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
{#if history.messages[messageId]} {#if history.messages[messageId].role === 'user'}