From 2d5bb40ad0be6ea1066b4a383682cfbe2332e813 Mon Sep 17 00:00:00 2001 From: Yuriha <121590760+yuriha-chan@users.noreply.github.com> Date: Mon, 5 Jun 2023 18:06:33 +0900 Subject: [PATCH] Condensedlines reflow once (#10944) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf: Update MkCondensedLine styles after reading all dimensions * perf: reduce reflow in MkCondensedLine * lint * Update packages/frontend/src/components/global/MkCondensedLine.vue Co-authored-by: Acid Chicken (硫酸鶏) * Update packages/frontend/src/components/global/MkCondensedLine.vue Co-authored-by: Acid Chicken (硫酸鶏) --------- Co-authored-by: syuilo Co-authored-by: Acid Chicken (硫酸鶏) --- .../frontend/src/components/global/MkCondensedLine.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/global/MkCondensedLine.vue b/packages/frontend/src/components/global/MkCondensedLine.vue index 1d46ff1ec..4b2e8e475 100644 --- a/packages/frontend/src/components/global/MkCondensedLine.vue +++ b/packages/frontend/src/components/global/MkCondensedLine.vue @@ -13,13 +13,20 @@ interface Props { const contentSymbol = Symbol(); const observer = new ResizeObserver((entries) => { + const results: { + container: HTMLSpanElement; + transform: string; + }[] = []; for (const entry of entries) { const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement; const props: Required = content[contentSymbol]; const container = content.parentElement as HTMLSpanElement; const contentWidth = content.getBoundingClientRect().width; const containerWidth = container.getBoundingClientRect().width; - container.style.transform = `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})`; + results.push({ container, transform: `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})` }); + } + for (const result of results) { + result.container.style.transform = result.transform; } });