Safari glitch

demo/src/main.ts

@@ -1,5 +1,5 @@
 import './style.css';
-import { Marquee, loop, LoopReturn } from 'dynamic-marquee';
+import { Marquee, LoopReturn } from 'dynamic-marquee';
 
 declare global {
   interface Window {
@@ -12,22 +12,11 @@ const $marquee = document.getElementById('marquee')!;
 
 const marquee = (window.m = new Marquee($marquee, {
   rate: -100,
+  // rate: -500,
 }));
 
-window.l = loop(
-  marquee,
-  [
-    () => 'Contrary to popular belief, Lorem Ipsum is not simply random text',
-    () =>
-      'It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old',
-    () =>
-      'Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source',
-    () =>
-      'Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC',
-  ],
-  () => {
-    const $separator = document.createElement('div');
-    $separator.innerHTML = '&nbsp•&nbsp';
-    return $separator;
-  },
+marquee.appendItem(
+  'testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest'.repeat(
+    1,
+  ),
 );

demo/src/style.css

@@ -1,13 +1,16 @@
 #marquee {
-  position: fixed;
-  overflow: hidden;
+  /* position: fixed; */
+  /* overflow: hidden; */
+  width: 200px;
   margin: 0;
+  margin-left: 500px;
+  /* margin-left: 600px; */
   padding: 7px 0;
   font-size: 20px;
-  bottom: 0;
+  /* bottom: 0;
   left: 0;
-  right: 0;
+  right: 0; */
   background-color: #c80000;
-  color: #ffffff;
+  color: #000000;
   font-family: Verdana, Geneva, sans-serif;
 }

src/item.js

@@ -4,7 +4,7 @@ import { SizeWatcher } from './size-watcher.js';
 export class Item {
   constructor({ $el, direction, metadata, snapToNeighbor }) {
     const $container = document.createElement('div');
-    $container.style.all = 'unset';
+    // $container.style.all = 'unset';
     $container.style.display = 'block';
     $container.style.opacity = '0';
     $container.style.pointerEvents = 'none';

src/marquee.js

@@ -5,7 +5,9 @@ import { DIRECTION } from './direction.js';
 import { defer, deferException, toDomEl, first, last } from './helpers.js';
 import { SizeWatcher } from './size-watcher.js';
 
-const maxTranslateDistance = 500000;
+// const maxTranslateDistance = 500000;
+// const maxTranslateDistance = 1000;
+const maxTranslateDistance = 500;
 const renderInterval = 100;
 
 export class Marquee {
@@ -49,9 +51,9 @@ export class Marquee {
     this._visible = !!document.hidden;
     this._waitingForRaf = false;
     const $window = document.createElement('div');
-    $window.style.all = 'unset';
+    // $window.style.all = 'unset';
     $window.style.display = 'block';
-    $window.style.overflow = 'hidden';
+    // $window.style.overflow = 'hidden';
     $window.style.position = 'relative';
     if (this._direction === DIRECTION.DOWN) {
       $window.style.height = '100%';
@@ -67,7 +69,7 @@ export class Marquee {
     this._updateWindowInverseSize();
     const $moving = document.createElement('div');
     this._$moving = $moving;
-    $moving.style.all = 'unset';
+    // $moving.style.all = 'unset';
     $moving.style.display = 'block';
     $moving.style.position = 'absolute';
     $moving.style.left = '0';

src/slider.js

@@ -1,6 +1,7 @@
 import { DIRECTION } from './direction';
 
-const transitionDuration = 30000;
+// const transitionDuration = 30000;
+const transitionDuration = 15000;
 
 export class Slider {
   constructor($el, direction) {
@@ -10,6 +11,7 @@ export class Slider {
   }
 
   setOffset(offset, rate, force) {
+    // force = true;
     const transitionState = this._transitionState;
     const rateChanged = !transitionState || transitionState.rate !== rate;
     if (transitionState && !force) {
@@ -19,6 +21,8 @@ export class Slider {
       }
     }
 
+    // if (offset === 0) offset = 300;
+
     if (force || rateChanged) {
       if (this._direction === DIRECTION.RIGHT) {
         this._$el.style.transform = `translateX(${offset}px)`;
@@ -28,10 +32,13 @@ export class Slider {
 
       this._$el.style.transition = 'none';
       this._$el.offsetLeft;
+      console.log('offset left', offset);
     }
 
     if (rate && (force || rateChanged)) {
       this._$el.style.transition = `transform ${transitionDuration}ms linear`;
+
+      console.log('updating transition');
     }
 
     if (rate) {