Merge pull request #109 from shoelace-style/safari-spinner

fixes #95

docs/docs/resources/changelog.md

@@ -19,6 +19,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
 - Changed `primary` variants to `brand` in all components
+- Fixed a bug in `<wa-spinner>` that caused it to display incorrectly when zooming in Safari
 - Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
 - Improved tabbing in `<wa-tab-group>` so it uses a roving tab index instead of being able to cycle through each tab
 - Removed `default` from `<wa-button>` and made `neutral` the new default

src/components/spinner/spinner.styles.ts

@@ -12,54 +12,52 @@ export default css`
     --indicator-color: var(--wa-color-brand-spot);
     --speed: 2s;
 
+    flex: none;
     display: inline-flex;
     width: 1em;
     height: 1em;
-    flex: none;
+    animation: spin var(--speed) linear infinite;
   }
 
-  .spinner {
-    flex: 1 1 auto;
-    height: 100%;
+  svg {
     width: 100%;
-  }
-
-  .spinner__track,
-  .spinner__indicator {
-    fill: none;
-    stroke-width: var(--track-width);
-    r: calc(0.5em - var(--track-width) / 2);
-    cx: 0.5em;
-    cy: 0.5em;
-    transform-origin: 50% 50%;
+    height: 100%;
+    aspect-ratio: 1;
   }
 
   .spinner__track {
     stroke: var(--track-color);
-    transform-origin: 0% 0%;
   }
 
   .spinner__indicator {
     stroke: var(--indicator-color);
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: -5;
+    animation: dash 1.5s ease-in-out infinite;
     stroke-linecap: round;
-    stroke-dasharray: 150% 75%;
-    animation: spin var(--speed) linear infinite;
   }
 
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.05em, 3em;
     }
-
-    50% {
-      transform: rotate(450deg);
-      stroke-dasharray: 1.375em, 1.375em;
-    }
-
     100% {
-      transform: rotate(1080deg);
-      stroke-dasharray: 0.05em, 3em;
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
     }
   }
 `;

src/components/spinner/spinner.test.ts

@@ -14,19 +14,6 @@ describe('<wa-spinner>', () => {
       expect(base).have.attribute('role', 'progressbar');
     });
 
-    it('should use "transform: rotate(x)" instead of "rotate: x" when animating', async () => {
-      const spinner = await fixture<WaSpinner>(html` <wa-spinner></wa-spinner> `);
-      const indicator = spinner.shadowRoot!.querySelector('.spinner__indicator')!;
-
-      //
-      // This matrix is the computed value when using `transform: rotate(x)` on the indicator. When using `rotate: x`,
-      // it will be "none" instead.
-      //
-      // Related: https://github.com/shoelace-style/shoelace/issues/1121
-      //
-      expect(getComputedStyle(indicator).transform).to.equal('matrix(1, 0, 0, 1, 0, 0)');
-    });
-
     it('should have flex:none to prevent flex re-sizing', async () => {
       const spinner = await fixture<WaSpinner>(html` <wa-spinner></wa-spinner> `);
 

src/components/spinner/spinner.ts

@@ -27,9 +27,16 @@ export default class WaSpinner extends WebAwesomeElement {
 
   render() {
     return html`
-      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term('loading')}>
-        <circle class="spinner__track"></circle>
-        <circle class="spinner__indicator"></circle>
+      <svg
+        part="base"
+        role="progressbar"
+        aria-label=${this.localize.term('loading')}
+        fill="none"
+        viewBox="0 0 50 50"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle class="spinner__track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
+        <circle class="spinner__indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
       </svg>
     `;
   }