From 4a3674cf60ac742eae4c7c41536edfd9a8374e92 Mon Sep 17 00:00:00 2001
From: Wolfram Hofmeister <wolfram.hofmeister@bitmovin.com>
Date: Thu, 7 Nov 2024 10:51:23 +0100
Subject: [PATCH] Use offsetWidth and offsetHeight to ensure correct marked
 placement when scaling is applied

---
 src/ts/components/seekbar.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/ts/components/seekbar.ts b/src/ts/components/seekbar.ts
index c06cc0137..529e40d26 100644
--- a/src/ts/components/seekbar.ts
+++ b/src/ts/components/seekbar.ts
@@ -487,7 +487,11 @@ export class SeekBar extends Component<SeekBarConfig> {
       cssPrefix: this.config.cssPrefix,
       snappingRange: this.config.snappingRange,
     };
-    this.timelineMarkersHandler = new TimelineMarkersHandler(timelineMarkerConfig, () => this.seekBar.width(), this.seekBarMarkersContainer);
+    this.timelineMarkersHandler = new TimelineMarkersHandler(
+      timelineMarkerConfig,
+      () => this.seekBar.offsetWidth(),
+      this.seekBarMarkersContainer,
+    );
     this.timelineMarkersHandler.initialize(player, uimanager);
   }
 
@@ -891,10 +895,12 @@ export class SeekBar extends Component<SeekBarConfig> {
     this.setPosition(this.seekBarPlaybackPosition, percent);
 
     // Set position of the marker
-    let totalSize = (this.config.vertical ? (this.seekBar.height() - this.seekBarPlaybackPositionMarker.height()) : this.seekBar.width());
+    let totalSize = this.config.vertical
+      ? (this.seekBar.offsetHeight() - this.seekBarPlaybackPositionMarker.height())
+      : this.seekBar.offsetWidth();
     let px = (totalSize) / 100 * percent;
     if (this.config.vertical) {
-      px = this.seekBar.height() - px - this.seekBarPlaybackPositionMarker.height();
+      px = this.seekBar.offsetHeight() - px - this.seekBarPlaybackPositionMarker.offsetHeight();
     }
 
     let style = this.config.vertical ?