diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index 57d24d82eee747e87c4a959e1b466627eda3bbbc..661c0a98776f71f0db20e5c7e4e848bb8a65b185 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -39,10 +39,18 @@ const ro = new ResizeObserver(entries => { } }); -function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement) { +async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement, count = 0) { + if (_DEV_) console.log('getClientWidthWithCache', { targetEl, containerEl, count, cache: widthCache.get(containerEl) }); if (widthCache.has(containerEl)) return widthCache.get(containerEl)!; const width = targetEl.clientWidth; + + if (count <= 10 && width < 64) { + // widthãŒ64未満ã¯ãŠã‹ã—ã„ã®ã§ãƒªãƒˆãƒ©ã‚¤ã™ã‚‹ + await new Promise(resolve => setTimeout(resolve, 50)); + return getClientWidthWithCache(targetEl, containerEl, count + 1); + } + widthCache.set(containerEl, width); ro.observe(containerEl); return width; @@ -79,7 +87,7 @@ const count = $computed(() => props.mediaList.filter(media => previewable(media) * アスペクト比をmediaListWithOneImageAppearanceã«åŸºã¥ã„ã¦ã„ã„æ„Ÿã˜ã«èª¿æ•´ã™ã‚‹ * aspect-ratioã§ã¯ãªãheightを使ㆠ*/ -function calcAspectRatio() { + async function calcAspectRatio() { if (!gallery.value || !root.value) return; let img = props.mediaList[0]; @@ -90,7 +98,7 @@ function calcAspectRatio() { } if (!container.value) container.value = getScrollContainer(root.value); - const width = container.value ? getClientWidthWithCache(root.value, container.value) : root.value.clientWidth; + const width = container.value ? await getClientWidthWithCache(root.value, container.value) : root.value.clientWidth; const heightMin = (ratio: number) => { const imgResizeRatio = width / img.properties.width;