diff --git a/rspack.config.js b/rspack.config.js
index b8674b866b..a17fb04a16 100644
--- a/rspack.config.js
+++ b/rspack.config.js
@@ -78,8 +78,8 @@ module.exports = (env, argv) => {
 				overlay: {
 					runtimeErrors: (error) => {
 						if (error.message === 'ResizeObserver loop completed with undelivered notifications.') {
-						  return false;
-						}
+							return false;
+						};
 				
 						return true;
 					  },
diff --git a/src/ts/component/util/media/audio.tsx b/src/ts/component/util/media/audio.tsx
index 4f2598fb9f..3e10bc9345 100644
--- a/src/ts/component/util/media/audio.tsx
+++ b/src/ts/component/util/media/audio.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef, MouseEvent } from 'react';
 import $ from 'jquery';
+import raf from 'raf';
 import { Icon, DragHorizontal, DragVertical, Floater } from 'Component';
 import { U } from 'Lib';
 
@@ -33,7 +34,9 @@ const MediaAudio = forwardRef<MediaAudioRefProps, Props>(({
 	const volumeIconRef = useRef(null);
 	const playIconRef = useRef(null);
 	const floaterRef = useRef(null);
-	const resizeObserver = new ResizeObserver(() => resize());
+	const resizeObserver = new ResizeObserver(() => {
+		raf(() => resize());
+	});
 	const [ current, setCurrent ] = useState<PlaylistItem>(null);
 	const { src, name }	= current || {};
 	const ci = [ 'volume' ];
diff --git a/src/ts/component/util/media/pdf.tsx b/src/ts/component/util/media/pdf.tsx
index 80d3df755b..42a762d738 100644
--- a/src/ts/component/util/media/pdf.tsx
+++ b/src/ts/component/util/media/pdf.tsx
@@ -35,7 +35,9 @@ const MediaPdf = forwardRef<MediaPdfRefProps, Props>(({
 	const [ width, setWidth ] = useState(0);
 	const nodeRef = useRef(null);
 	const frame = useRef(0);
-	const resizeObserver = new ResizeObserver(() => resize());
+	const resizeObserver = new ResizeObserver(() => {
+		raf(() => resize());
+	});
 	const options = { 
 		isEvalSupported: false, 
 		cMapUrl: U.Common.fixAsarPath('./cmaps/'),
diff --git a/src/ts/component/util/progress.tsx b/src/ts/component/util/progress.tsx
index af2bd91948..1b9e6ed6ac 100644
--- a/src/ts/component/util/progress.tsx
+++ b/src/ts/component/util/progress.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useRef, useEffect } from 'react';
 import $ from 'jquery';
+import raf from 'raf';
 import { observer } from 'mobx-react';
 import { Icon, Label, Error } from 'Component';
 import { I, S, U, C, J, Storage, keyboard, translate } from 'Lib';
@@ -17,7 +18,9 @@ const Progress: FC = observer(() => {
 	const dy = useRef(0);
 	const width = useRef(0);
 	const height = useRef(0);
-	const resizeObserver = new ResizeObserver(() => resize());
+	const resizeObserver = new ResizeObserver(() => {
+		raf(() => resize());
+	});
 	const cn = [ 'progress' ];
 
 	const Item = (item: any) => {