diff options
| author | Yuriha <121590760+yuriha-chan@users.noreply.github.com> | 2023-06-05 18:06:33 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-05 18:06:33 +0900 |
| commit | 2d5bb40ad0be6ea1066b4a383682cfbe2332e813 (patch) | |
| tree | f6428071f6ee6ba629c777b67fd6bf3b803b9d08 /packages/frontend/src/components/global/MkCondensedLine.vue | |
| parent | [ci skip] New Crowdin updates (#10947) (diff) | |
| download | sharkey-2d5bb40ad0be6ea1066b4a383682cfbe2332e813.tar.gz sharkey-2d5bb40ad0be6ea1066b4a383682cfbe2332e813.tar.bz2 sharkey-2d5bb40ad0be6ea1066b4a383682cfbe2332e813.zip | |
Condensedlines reflow once (#10944)
* 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 (硫酸鶏) <root@acid-chicken.com>
* Update packages/frontend/src/components/global/MkCondensedLine.vue
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
---------
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Diffstat (limited to 'packages/frontend/src/components/global/MkCondensedLine.vue')
| -rw-r--r-- | packages/frontend/src/components/global/MkCondensedLine.vue | 9 |
1 files changed, 8 insertions, 1 deletions
diff --git a/packages/frontend/src/components/global/MkCondensedLine.vue b/packages/frontend/src/components/global/MkCondensedLine.vue index 1d46ff1ec9..4b2e8e4750 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<Props> = 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; } }); </script> |