diff --git a/packages/lexical-playground/src/ui/KatexRenderer.tsx b/packages/lexical-playground/src/ui/KatexRenderer.tsx
index a6084e77aa8..709638a3b06 100644
--- a/packages/lexical-playground/src/ui/KatexRenderer.tsx
+++ b/packages/lexical-playground/src/ui/KatexRenderer.tsx
@@ -8,7 +8,7 @@
 
 import katex from 'katex';
 import * as React from 'react';
-import {useEffect, useRef} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 export default function KatexRenderer({
   equation,
@@ -20,13 +20,20 @@ export default function KatexRenderer({
   onDoubleClick: () => void;
 }>): JSX.Element {
   const katexElementRef = useRef(null);
+  const [isSafari, setIsSafari] = useState(false); // State to track if the browser is Safari
+
+  // Detect if the browser is Safari during the client rendering phase
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    setIsSafari(/^((?!chrome|android).)*safari/i.test(userAgent));
+  }, []);
 
   useEffect(() => {
     const katexElement = katexElementRef.current;
 
     if (katexElement !== null) {
       katex.render(equation, katexElement, {
-        displayMode: !inline, // true === block display //
+        displayMode: !inline, // true === block display
         errorColor: '#cc0000',
         output: 'html',
         strict: 'warn',
@@ -37,6 +44,7 @@ export default function KatexRenderer({
   }, [equation, inline]);
 
   return (
+    // Use empty image tags conditionally based on the browser
     // We use an empty image tag either side to ensure Android doesn't try and compose from the
     // inner text from Katex. There didn't seem to be any other way of making this work,
     // without having a physical space.
@@ -48,7 +56,7 @@ export default function KatexRenderer({
         onDoubleClick={onDoubleClick}
         ref={katexElementRef}
       />
-      <img src="#" alt="" />
+      {!isSafari && <img src="#" alt="" />}
     </>
   );
 }