diff --git a/src/core/modules/resize/resize.js b/src/core/modules/resize/resize.js index 8b27b14bd..b1f359054 100644 --- a/src/core/modules/resize/resize.js +++ b/src/core/modules/resize/resize.js @@ -3,6 +3,7 @@ import { getWindow } from 'ssr-window'; export default function Resize({ swiper, on, emit }) { const window = getWindow(); let observer = null; + let animationFrame = null; const resizeHandler = () => { if (!swiper || swiper.destroyed || !swiper.initialized) return; @@ -13,26 +14,31 @@ export default function Resize({ swiper, on, emit }) { const createObserver = () => { if (!swiper || swiper.destroyed || !swiper.initialized) return; observer = new ResizeObserver((entries) => { - const { width, height } = swiper; - let newWidth = width; - let newHeight = height; - entries.forEach(({ contentBoxSize, contentRect, target }) => { - if (target && target !== swiper.el) return; - newWidth = contentRect - ? contentRect.width - : (contentBoxSize[0] || contentBoxSize).inlineSize; - newHeight = contentRect - ? contentRect.height - : (contentBoxSize[0] || contentBoxSize).blockSize; + animationFrame = window.requestAnimationFrame(() => { + const { width, height } = swiper; + let newWidth = width; + let newHeight = height; + entries.forEach(({ contentBoxSize, contentRect, target }) => { + if (target && target !== swiper.el) return; + newWidth = contentRect + ? contentRect.width + : (contentBoxSize[0] || contentBoxSize).inlineSize; + newHeight = contentRect + ? contentRect.height + : (contentBoxSize[0] || contentBoxSize).blockSize; + }); + if (newWidth !== width || newHeight !== height) { + resizeHandler(); + } }); - if (newWidth !== width || newHeight !== height) { - resizeHandler(); - } }); observer.observe(swiper.el); }; const removeObserver = () => { + if (animationFrame) { + window.cancelAnimationFrame(animationFrame); + } if (observer && observer.unobserve && swiper.el) { observer.unobserve(swiper.el); observer = null;