diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss
index b9191a4b1f2..ff44aa4ee09 100644
--- a/core/src/components/spinner/spinner.scss
+++ b/core/src/components/spinner/spinner.scss
@@ -115,7 +115,7 @@ svg {
// Spinner: circular
// --------------------------------------------------
-:host(.spinner-circular) {
+:host(.spinner-circular) svg {
animation: spinner-circular linear infinite;
}
diff --git a/core/src/components/spinner/test/transform/e2e.ts b/core/src/components/spinner/test/transform/e2e.ts
new file mode 100644
index 00000000000..abe33a23934
--- /dev/null
+++ b/core/src/components/spinner/test/transform/e2e.ts
@@ -0,0 +1,18 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+// made to catch animation issues when transform is applied to host
+// example: https://github.com/ionic-team/ionic-framework/issues/19247
+test('spinner: transform', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/spinner/test/transform?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+
+ // wait for a bit less than the spinner's duration (to avoid looping before screenshot is taken)
+ await new Promise(resolve => setTimeout(resolve, 1500));
+
+ const compare2 = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/spinner/test/transform/index.html b/core/src/components/spinner/test/transform/index.html
new file mode 100644
index 00000000000..3c0ee279763
--- /dev/null
+++ b/core/src/components/spinner/test/transform/index.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+ Spinner - Transform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spinner - Transform
+
+
+
+
+
+
+
+ bubbles
+
+
+
+ circles
+
+
+
+ circular
+
+
+
+ crescent
+
+
+
+ dots
+
+
+
+ lines
+
+
+
+ lines-sharp
+
+
+
+ lines-sharp-small
+
+
+
+ lines-small
+
+
+
+
+
+
+
+
\ No newline at end of file