fix when container is scaled

davidjerleke · Nov 16, 2023 · 9ad8b9d · 9ad8b9d
1 parent 2711799
commit 9ad8b9d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
@@ -27,7 +27,13 @@ import { SlidesInView, SlidesInViewType } from './SlidesInView'
 import { SlideSizes } from './SlideSizes'
 import { SlidesToScroll, SlidesToScrollType } from './SlidesToScroll'
 import { Translate, TranslateType } from './Translate'
-import { arrayKeys, arrayLast, arrayLastIndex, WindowType } from './utils'
+import {
+  arrayKeys,
+  arrayLast,
+  arrayLastIndex,
+  getNodeRect,
+  WindowType
+} from './utils'
 import { Vector1D, Vector1DType } from './Vector1d'
 import {
   AnimationType,
@@ -104,8 +110,8 @@ export function Engine(
   } = options
 
   // Measurements
-  const containerRect = container.getBoundingClientRect()
-  const slideRects = slides.map((slide) => slide.getBoundingClientRect())
+  const containerRect = getNodeRect(container)
+  const slideRects = slides.map((slide) => getNodeRect(slide))
   const direction = Direction(contentDirection)
   const axis = Axis(scrollAxis, contentDirection)
   const viewSize = axis.measureSize(containerRect)

diff --git a/packages/embla-carousel/src/components/ResizeHandler.ts b/packages/embla-carousel/src/components/ResizeHandler.ts
@@ -1,7 +1,7 @@
 import { AxisType } from './Axis'
 import { EmblaCarouselType } from './EmblaCarousel'
 import { EventHandlerType } from './EventHandler'
-import { isBoolean, mathAbs, WindowType } from './utils'
+import { getNodeRect, isBoolean, mathAbs, WindowType } from './utils'
 
 type ResizeHandlerCallbackType = (
   emblaApi: EmblaCarouselType,
@@ -28,8 +28,8 @@ export function ResizeHandler(
   let slideSizes: number[] = []
   let destroyed = false
 
-  function readSize(node: Element | HTMLElement): number {
-    return axis.measureSize(node.getBoundingClientRect())
+  function readSize(node: HTMLElement): number {
+    return axis.measureSize(getNodeRect(node))
   }
 
   function init(emblaApi: EmblaCarouselType): void {

diff --git a/packages/embla-carousel/src/components/utils.ts b/packages/embla-carousel/src/components/utils.ts
@@ -88,3 +88,23 @@ export function isMouseEvent(
     evt instanceof ownerWindow.MouseEvent
   )
 }
+
+export function getNodeRect(node: HTMLElement): DOMRect {
+  const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node
+
+  const rect = {
+    top: offsetTop,
+    left: offsetLeft,
+    x: offsetLeft,
+    y: offsetTop,
+    width: offsetWidth,
+    height: offsetHeight,
+    bottom: offsetTop + offsetHeight,
+    right: offsetLeft + offsetWidth
+  }
+
+  return {
+    ...rect,
+    toJSON: () => rect
+  }
+}