From 810ffb3e365ec2b4918ae63c2944b7f830b75827 Mon Sep 17 00:00:00 2001 From: joaosa Date: Fri, 24 May 2024 11:25:55 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Convert=20bar=20transform-origin?= =?UTF-8?q?=20to=20rem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/lume-bar/composables/bar-transition.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/components/core/lume-bar/composables/bar-transition.ts b/packages/lib/src/components/core/lume-bar/composables/bar-transition.ts index f0c1812b..a84e96b5 100644 --- a/packages/lib/src/components/core/lume-bar/composables/bar-transition.ts +++ b/packages/lib/src/components/core/lume-bar/composables/bar-transition.ts @@ -11,8 +11,17 @@ export function useBarTransition( const computedHeight = ref(0); const transformOrigin = computed(() => { + const remFontSize = parseFloat( + getComputedStyle(document.documentElement).fontSize + ); + + // Convert to REM so that it behaves correctly in Safari browsers + // https://github.com/Adyen/lume/issues/430 + const originX = (x.value + width.value / 2) / remFontSize; + const originY = (y.value + height.value / 2) / remFontSize; + // Calculates the middle point of a bar so that it can be rotated 180 deg - return `${x.value + width.value / 2}px ${y.value + height.value / 2}px`; + return `${originX}rem ${originY}rem`; }); onMounted(() => {