diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index b44fc68..39133fb 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -4,6 +4,7 @@ import cx from 'utils/cx'
import { useWindowSize, useMediaStyleSheet } from 'utils/hooks'
import { bodySpacingClassName } from 'utils/DOMHelper'
import configHelper, { configKeys } from 'utils/configHelper'
+import * as features from 'utils/features'
export type Size = number
type Props = {
@@ -53,12 +54,14 @@ export default function Resizable({
return (
{children}
-
{
- if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size)
- }}
- size={size}
- />
+ {features.resize && (
+ {
+ if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size)
+ }}
+ size={size}
+ />
+ )}
)
}
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
index 7e63657..d7a633d 100644
--- a/src/components/SizeObserver.tsx
+++ b/src/components/SizeObserver.tsx
@@ -1,4 +1,5 @@
import * as React from 'react'
+import * as features from 'utils/features'
type Size = {
width: number
@@ -23,24 +24,37 @@ export default function SizeObserver({
})
React.useEffect(() => {
- const observer = new window.ResizeObserver(entries => {
- const entry = entries[0]
- if (!entry) return
- const rect = entry.contentRect
- // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
- requestAnimationFrame(() =>
- setSize({
- width: rect.width,
- height: rect.height,
- }),
- )
- })
+ if (features.resize) {
+ const observer = new window.ResizeObserver(entries => {
+ const entry = entries[0]
+ if (!entry) return
+ const rect = entry.contentRect
+ safeSetSize(rect)
+ })
- if (ref.current) observer.observe(ref.current)
- return () => observer.disconnect()
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ } else {
+ if (ref.current) {
+ if ('getBoundingClientRect' in ref.current) {
+ const rect = ref.current.getBoundingClientRect()
+ setSize(rect)
+ }
+ }
+ }
}, [])
const props: any = { ...rest, ref } // :)
return React.createElement(type, props, children(size))
+
+ function safeSetSize(rect: DOMRectReadOnly) {
+ // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
+ requestAnimationFrame(() =>
+ setSize({
+ width: rect.width,
+ height: rect.height,
+ }),
+ )
+ }
}
diff --git a/src/utils/features.ts b/src/utils/features.ts
new file mode 100644
index 0000000..fb1df66
--- /dev/null
+++ b/src/utils/features.ts
@@ -0,0 +1 @@
+export const resize = Boolean(window.ResizeObserver)