fix(client): prevent infinite resize loop (#9232)

* clientWidth?

* spacer?

* size directive?

* size directive

* use const
This commit is contained in:
tamaina 2022-12-26 12:55:10 +09:00 committed by GitHub
parent 6acc10b4ba
commit f0fe930aae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 3 deletions

View file

@ -24,6 +24,8 @@ let ro: ResizeObserver;
let root = $ref<HTMLElement>(); let root = $ref<HTMLElement>();
let content = $ref<HTMLElement>(); let content = $ref<HTMLElement>();
let margin = $ref(0); 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 shouldSpacerMin = inject('shouldSpacerMin', false);
const adjust = (rect: { width: number; height: number; }) => { const adjust = (rect: { width: number; height: number; }) => {
@ -47,9 +49,26 @@ onMounted(() => {
height: entries[0].borderBoxSize[0].blockSize, 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({ adjust({
width: root!.offsetWidth, width,
height: root!.offsetHeight, height,
}); });
}); });
ro.observe(root!); ro.observe(root!);

View file

@ -8,6 +8,7 @@ const mountings = new Map<Element, {
resize: ResizeObserver; resize: ResizeObserver;
intersection?: IntersectionObserver; intersection?: IntersectionObserver;
previousWidth: number; previousWidth: number;
twoPreviousWidth: number;
}>(); }>();
type ClassOrder = { type ClassOrder = {
@ -66,7 +67,13 @@ function calc(el: Element) {
delete info.intersection; 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)); const cached = cache.get(getOrderName(width, info.value));
if (cached) { if (cached) {
@ -90,6 +97,7 @@ export default {
value: binding.value, value: binding.value,
resize, resize,
previousWidth: 0, previousWidth: 0,
twoPreviousWidth: 0,
}); });
calc(src); calc(src);