Simple implementation to fix seekbar rendering on gradiant layout

Fixes #2099

1 files changed, 9 insertions, 1 deletions

diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
index 004d4677..6dcd835a 100644
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -647,8 +647,16 @@ class PreviewBar {
                         if (changedData.scale !== null) {
                             const transformScale = (changedData.scale) / progressBar.clientWidth;
 
+                            const scale = Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft));
                             customChangedElement.style.transform =
-                                `scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft))}`;
+                                `scaleX(${scale})`;
+                            if (customChangedElement.style.backgroundSize) {
+                                const backgroundSize = progressBar.clientWidth;
+                                customChangedElement.style.backgroundSize = `${backgroundSize}px`;
+
+                                customChangedElement.style.backgroundPosition = `${-(cursor * progressBar.clientWidth)}px`;
+                            }
+
                             if (firstUpdate) {
                                 customChangedElement.style.transition = "none";
                                 setTimeout(() => customChangedElement.style.removeProperty("transition"), 50);