From fd91bcf603baf2200c85a85aba5c51906371907e Mon Sep 17 00:00:00 2001
From: Gabe <yugang2002@gmail.com>
Date: Sun, 2 Nov 2025 23:37:04 +0800
Subject: [PATCH] fix: Reset fontsize when the fontsize of the html element is
 changed. (#348)

---
 src/hooks/Theme.js           | 15 ++-------------
 src/libs/shadowDomManager.js | 12 ++++--------
 src/libs/tranbox.js          | 31 +++++++++++--------------------
 3 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/hooks/Theme.js b/src/hooks/Theme.js
index bb714ea..e7c5d29 100644
--- a/src/hooks/Theme.js
+++ b/src/hooks/Theme.js
@@ -9,7 +9,7 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
  * @param {*} param0
  * @returns
  */
-export default function Theme({ children, options, styles }) {
+export default function Theme({ children, options = {}, styles = {} }) {
   const { darkMode } = useDarkMode();
   const [systemMode, setSystemMode] = useState(THEME_LIGHT);
 
@@ -27,17 +27,6 @@ export default function Theme({ children, options, styles }) {
   }, []);
 
   const theme = useMemo(() => {
-    let htmlFontSize = 16;
-    try {
-      const s = window.getComputedStyle(document.body.parentNode).fontSize;
-      const fontSize = parseInt(s.replace("px", ""));
-      if (fontSize > 0 && fontSize < 1000) {
-        htmlFontSize = fontSize;
-      }
-    } catch (err) {
-      //
-    }
-
     const isDarkMode =
       darkMode === "dark" || (darkMode === "auto" && systemMode === THEME_DARK);
 
@@ -46,7 +35,7 @@ export default function Theme({ children, options, styles }) {
         mode: isDarkMode ? THEME_DARK : THEME_LIGHT,
       },
       typography: {
-        htmlFontSize,
+        htmlFontSize: document.documentElement.style.fontSize ? "16px" : 16,
       },
       ...options,
     });
diff --git a/src/libs/shadowDomManager.js b/src/libs/shadowDomManager.js
index 74d3222..7562793 100644
--- a/src/libs/shadowDomManager.js
+++ b/src/libs/shadowDomManager.js
@@ -92,22 +92,18 @@ export default class ShadowDomManager {
     if (this._className) {
       host.className = this._className;
     }
-    host.style.display = "none";
-    document.body.parentElement.appendChild(host);
-    this.#hostElement = host;
 
-    const shadowContainer = host.attachShadow({ mode: "closed" });
-    const emotionRoot = document.createElement("style");
+    document.body.appendChild(host);
+    this.#hostElement = host;
+    const shadowContainer = host.attachShadow({ mode: "open" });
     const appRoot = document.createElement("div");
     appRoot.className = `${this._id}_wrapper`;
-
-    shadowContainer.appendChild(emotionRoot);
     shadowContainer.appendChild(appRoot);
 
     const cache = createCache({
       key: this._id,
       prepend: true,
-      container: emotionRoot,
+      container: shadowContainer,
     });
 
     const enhancedProps = {
diff --git a/src/libs/tranbox.js b/src/libs/tranbox.js
index 75d7052..0f505af 100644
--- a/src/libs/tranbox.js
+++ b/src/libs/tranbox.js
@@ -31,36 +31,28 @@ export class TransboxManager {
       this.#container = document.createElement("div");
       this.#container.id = APP_CONSTS.boxID;
       this.#container.className = "notranslate";
-      this.#container.style.cssText =
-        "font-size: 0; width: 0; height: 0; border: 0; padding: 0; margin: 0;";
-      document.body.parentElement.appendChild(this.#container);
 
-      this.#shadowContainer = this.#container.attachShadow({ mode: "closed" });
-      const emotionRoot = document.createElement("style");
+      document.body.appendChild(this.#container);
+      this.#shadowContainer = this.#container.attachShadow({ mode: "open" });
       const shadowRootElement = document.createElement("div");
-      shadowRootElement.className = `${APP_CONSTS.boxID}_warpper notranslate`;
-      this.#shadowContainer.appendChild(emotionRoot);
+      shadowRootElement.className = `${APP_CONSTS.boxID}_wrapper notranslate`;
       this.#shadowContainer.appendChild(shadowRootElement);
+
       const cache = createCache({
         key: APP_CONSTS.boxID,
         prepend: true,
-        container: emotionRoot,
+        container: this.#shadowContainer,
       });
 
       this.#reactRoot = ReactDOM.createRoot(shadowRootElement);
-      this.CacheProvider = ({ children }) => (
-        <CacheProvider value={cache}>{children}</CacheProvider>
+      this.#reactRoot.render(
+        <React.StrictMode>
+          <CacheProvider value={cache}>
+            <Slection {...this.#props} />
+          </CacheProvider>
+        </React.StrictMode>
       );
     }
-
-    const AppProvider = this.CacheProvider;
-    this.#reactRoot.render(
-      <React.StrictMode>
-        <AppProvider>
-          <Slection {...this.#props} />
-        </AppProvider>
-      </React.StrictMode>
-    );
   }
 
   disable() {
@@ -72,7 +64,6 @@ export class TransboxManager {
     this.#container = null;
     this.#reactRoot = null;
     this.#shadowContainer = null;
-    this.CacheProvider = null;
   }
 
   toggle() {