From 68c1ca19fa3e65eac3cfef9c4a617cb5038f0630 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 16 Mar 2026 14:57:13 -0400 Subject: [PATCH 1/3] fix(read-receipts): prevent emoji color bleed in follower names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit WebKit (Safari/iOS) has a rendering quirk where colorful emoji inside tags can contaminate the paint color of adjacent sibling text nodes. This caused display names following a user with an emoji (e.g. '🔴 Alice') to render with the emoji's color instead of the expected text color. Apply -webkit-text-fill-color: inherit on name tags and -webkit-text-fill-color: currentColor on the following elements. This explicitly resets the WebKit fill color chain at each step, preventing emoji paint properties from cascading into sibling spans. Fixes #267 --- src/app/features/room/RoomViewFollowing.tsx | 40 ++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/app/features/room/RoomViewFollowing.tsx b/src/app/features/room/RoomViewFollowing.tsx index c7285aceb..4e7fee489 100644 --- a/src/app/features/room/RoomViewFollowing.tsx +++ b/src/app/features/room/RoomViewFollowing.tsx @@ -89,56 +89,56 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( {names.length === 1 && ( <> - {names[0]} - + {names[0]} + {' is following the conversation.'} )} {names.length === 2 && ( <> - {names[0]} - + {names[0]} + {' and '} - {names[1]} - + {names[1]} + {' are following the conversation.'} )} {names.length === 3 && ( <> - {names[0]} - + {names[0]} + {', '} - {names[1]} - + {names[1]} + {' and '} - {names[2]} - + {names[2]} + {' are following the conversation.'} )} {names.length > 3 && ( <> - {names[0]} - + {names[0]} + {', '} - {names[1]} - + {names[1]} + {', '} - {names[2]} - + {names[2]} + {' and '} - {names.length - 3} others - + {names.length - 3} others + {' are following the conversation.'} From 97d28324aa874fe3024c3ba39b61c145ea7d1cc5 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 16 Mar 2026 15:20:08 -0400 Subject: [PATCH 2/3] fix(fmt): reformat RoomViewFollowing to satisfy prettier --- src/app/features/room/RoomViewFollowing.tsx | 70 ++++++++++++++++++--- 1 file changed, 60 insertions(+), 10 deletions(-) diff --git a/src/app/features/room/RoomViewFollowing.tsx b/src/app/features/room/RoomViewFollowing.tsx index 4e7fee489..6d9a60c68 100644 --- a/src/app/features/room/RoomViewFollowing.tsx +++ b/src/app/features/room/RoomViewFollowing.tsx @@ -90,7 +90,12 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( {names.length === 1 && ( <> {names[0]} - + {' is following the conversation.'} @@ -98,11 +103,21 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( {names.length === 2 && ( <> {names[0]} - + {' and '} {names[1]} - + {' are following the conversation.'} @@ -110,15 +125,30 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( {names.length === 3 && ( <> {names[0]} - + {', '} {names[1]} - + {' and '} {names[2]} - + {' are following the conversation.'} @@ -126,19 +156,39 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( {names.length > 3 && ( <> {names[0]} - + {', '} {names[1]} - + {', '} {names[2]} - + {' and '} {names.length - 3} others - + {' are following the conversation.'} From 44e87e7a6b07eb387137953f972a390696b59296 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 16 Mar 2026 15:27:48 -0400 Subject: [PATCH 3/3] chore: add changeset --- .changeset/fix-emoji-display-name-color.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fix-emoji-display-name-color.md diff --git a/.changeset/fix-emoji-display-name-color.md b/.changeset/fix-emoji-display-name-color.md new file mode 100644 index 000000000..667b20a23 --- /dev/null +++ b/.changeset/fix-emoji-display-name-color.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix emoji color bleeding into adjacent text in read receipt display names on Safari/WebKit