diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue index 28db62c11d..9e8e243019 100644 --- a/packages/client/src/components/global/MkPageHeader.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -153,12 +153,14 @@ onMounted(() => { // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 function transition() { - const parentRect = tabsEl.getBoundingClientRect(); - const rect = tabEl.getBoundingClientRect(); - const left = (rect.left - parentRect.left + tabsEl?.scrollLeft); - tabHighlightEl.style.width = rect.width + 'px'; - tabHighlightEl.style.left = left + 'px'; - tabsEl?.scrollTo({left: left - 80, behavior: "smooth"}); + window.requestAnimationFrame(() => { + const parentRect = tabsEl.getBoundingClientRect(); + const rect = tabEl.getBoundingClientRect(); + const left = (rect.left - parentRect.left + tabsEl?.scrollLeft); + tabHighlightEl.style.width = rect.width + 'px'; + tabHighlightEl.style.left = left + 'px'; + tabsEl?.scrollTo({left: left - 80, behavior: "smooth"}); + }) tabEl.removeEventListener("transitionend", transition); } tabEl.addEventListener("transitionend", transition);