Spinner animation broken in Safari browsers

[oliveratgithub]

Describe the bug

The sl-spinner animated progress is looping back and forth in Safari web-browsers (macOS and iOS). See video.

Demo

Upload.from.GitHub.for.iOS.MOV

Browser / OS

• OS: macOS, iOS, iPadOS
• Browser: Safari, Safari Mobile
• Browser version: 16+

Additional information

Affects at least Shoelace versions 2.0.0-beta87 and 2.0.0-beta88

[oliveratgithub]

Different issue that in earlier version, as described in #633

[CetinSert]

The issue does not exist in .85.

1. Go to https://sl.rt.ht/1121/?io
2. Press ↓ 3 times to reach version .85

---

The above link also presents a faster way of loading Shoelace.

<!--
script src              REQ  TRANSFER
  /+esm              →    1   88.8 kB 
  /dist/shoelace.js  →  149  259.0 kB
-->

[claviska]

This looks like a Safari bug. The regression occurred in 829e22d when changing transform: rotate(x) to rotate: x. Repro here:

https://codepen.io/claviska/pen/dyjvebY?editors=1100

I've reported this to the WebKit bug tracker:

https://bugs.webkit.org/show_bug.cgi?id=250387

In the meantime, reverting to translate: rotate(x) instead of rotate: x resolves it. I've also added a test to prevent this from happening again.

[claviska]

Just a heads up that this has been fixed upstream in WebKit. https://bugs.webkit.org/show_bug.cgi?id=250387