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
This commit is contained in:
kiner-tang(文辉) 2023-06-09 18:20:53 +08:00 committed by GitHub
parent 0ac59d42d8
commit fddd84c0bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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}>