fix(ld-tabs): safari layout bug due to different offset calculation

Fixes #424
emdgroup-liquid · Sep 19, 2022 · 467ab8b · 467ab8b · vercel · Sep 19, 2022
1 parent 76b7bb9
commit 467ab8b
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/liquid/components/ld-tabs/ld-tablist/ld-tablist.tsx b/src/liquid/components/ld-tabs/ld-tablist/ld-tablist.tsx
@@ -194,10 +194,11 @@ export class LdTablist {
       return
     }
 
-    const bcr = this.selectedTab.getBoundingClientRect()
-    const offsetLeft = this.selectedTab.offsetLeft
+    const selectedTabBcr = this.selectedTab.getBoundingClientRect()
+    const parentBcr = this.selectedTab.parentElement.getBoundingClientRect()
+    const offsetLeft = selectedTabBcr.left - parentBcr.left
     indicatorStyle.transform = `translateX(${offsetLeft - 8}px)`
-    indicatorStyle.width = `${bcr.width}px`
+    indicatorStyle.width = `${selectedTabBcr.width}px`
     indicatorStyle.opacity = '1'
   }