fix(site): solve drawer open delay in safari issue (#42922)

* fix: solve drawer open delay in safari issue

* feat: update comment

* feat: reset debug code

* feat: optimize code

* feat: optimize code

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -392,7 +392,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
         <ErrorBoundary>
           <React.StrictMode>{liveDemo.current}</React.StrictMode>
         </ErrorBoundary>
-        {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
       </section>
       <section className="code-box-meta markdown">
         <div className="code-box-title">
@@ -548,6 +547,23 @@ createRoot(document.getElementById('container')).render(<Demo />);
     </section>
   );
 
+  useEffect(() => {
+    // In Safari, if style tag be inserted into non-head tag,
+    // it will affect the rendering ability of the browser,
+    // resulting in some response delays like following issue:
+    // https://github.com/ant-design/ant-design/issues/39995
+    // So we insert style tag into head tag.
+    if (!style) return;
+    const styleTag = document.createElement('style');
+    styleTag.type = 'text/css';
+    styleTag.innerHTML = style;
+    styleTag['data-demo-url'] = demoUrl;
+    document.head.appendChild(styleTag);
+    return () => {
+      document.head.removeChild(styleTag);
+    };
+  }, [style, demoUrl]);
+
   if (version) {
     return (
       <Badge.Ribbon text={version} color={version.includes('<') ? 'red' : null}>