From f0fe930aae2aa936d85abfca58cbab3cd3cbb968 Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 26 Dec 2022 12:55:10 +0900 Subject: [PATCH] fix(client): prevent infinite resize loop (#9232) * clientWidth? * spacer? * size directive? * size directive * use const --- .../client/src/components/global/MkSpacer.vue | 23 +++++++++++++++++-- packages/client/src/directives/size.ts | 10 +++++++- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue index c7d53f2ee..b3a42d77e 100644 --- a/packages/client/src/components/global/MkSpacer.vue +++ b/packages/client/src/components/global/MkSpacer.vue @@ -24,6 +24,8 @@ let ro: ResizeObserver; let root = $ref(); let content = $ref(); let margin = $ref(0); +const widthHistory = [null, null] as [number | null, number | null]; +const heightHistory = [null, null] as [number | null, number | null]; const shouldSpacerMin = inject('shouldSpacerMin', false); const adjust = (rect: { width: number; height: number; }) => { @@ -47,9 +49,26 @@ onMounted(() => { height: entries[0].borderBoxSize[0].blockSize, }); */ + + const width = root!.offsetWidth; + const height = root!.offsetHeight; + + //#region Prevent infinite resizing + // https://github.com/misskey-dev/misskey/issues/9076 + const pastWidth = widthHistory.pop(); + widthHistory.unshift(width); + const pastHeight = heightHistory.pop(); + heightHistory.unshift(height); + + + if (pastWidth === width && pastHeight === height) { + return; + } + //#endregion + adjust({ - width: root!.offsetWidth, - height: root!.offsetHeight, + width, + height, }); }); ro.observe(root!); diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts index b514f4e38..da8bd78ea 100644 --- a/packages/client/src/directives/size.ts +++ b/packages/client/src/directives/size.ts @@ -8,6 +8,7 @@ const mountings = new Map(); type ClassOrder = { @@ -66,7 +67,13 @@ function calc(el: Element) { delete info.intersection; } - mountings.set(el, Object.assign(info, { previousWidth: width })); + mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }}); + + // Prevent infinite resizing + // https://github.com/misskey-dev/misskey/issues/9076 + if (info.twoPreviousWidth === width) { + return; + } const cached = cache.get(getOrderName(width, info.value)); if (cached) { @@ -90,6 +97,7 @@ export default { value: binding.value, resize, previousWidth: 0, + twoPreviousWidth: 0, }); calc(src);