fix(frontend): MkSparkleが動作しない問題を修正 (#15390)

* fix(frontend): MkSparkleが動作しない問題を修正

* Update Changelog

* fix

* add comments

2 files changed, 31 insertions, 23 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15eb611fd1..17310ae7d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### Client
 - Fix: 一部環境でセンシティブなファイルを含むノートの非表示が効かない問題 
 - Fix: データセーバー有効時にもユーザーページの「ファイル」タブで画像が読み込まれてしまう問題を修正
+- Fix: MFMの `sparkle` エフェクトが正しく表示されない問題を修正
 - ローカライゼーションの更新
 
 ### Server
diff --git a/packages/frontend/src/components/MkSparkle.vue b/packages/frontend/src/components/MkSparkle.vue
index 8491ce2f84..b3fc67c0df 100644
--- a/packages/frontend/src/components/MkSparkle.vue
+++ b/packages/frontend/src/components/MkSparkle.vue
@@ -39,32 +39,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 	-->
 	<!-- MFMで上位レイヤーに表示されるため、リンクをクリックできるようにstyleにpointer-events: none;を付与。 -->
 	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -32px; left: -32px; pointer-events: none;">
+		<!-- SVGのanimateTransformを使用するとChromeで描画できなくなるためCSSアニメーションを使用している (Issue 14155) -->
 		<path
-			style="transform-origin: center; transform-box: fill-box;"
-			:transform="`translate(${particle.x} ${particle.y})`"
+			:style="{
+				'--translateX': particle.x + 'px',
+				'--translateY': particle.y + 'px',
+				'--duration': particle.dur + 'ms',
+				'--size': particle.size,
+			}"
+			:class="$style.particle"
 			:fill="particle.color"
 			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
-		>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="rotate"
-				from="0 0 0"
-				to="360 0 0"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="scale"
-				:values="`0; ${particle.size}; 0`"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-		</path>
+		></path>
 	</svg>
 </span>
 </template>
@@ -130,4 +116,25 @@ onUnmounted(() => {
 	position: relative;
 	display: inline-block;
 }
+
+.particle {
+	transform-origin: center;
+	transform-box: fill-box;
+	translate: var(--translateX) var(--translateY);
+	animation: particleAnimation var(--duration) linear infinite;
+}
+
+@keyframes particleAnimation {
+	0% {
+		rotate: 0deg;
+		scale: 0;
+	}
+	50% {
+		scale: var(--size);
+	}
+	100% {
+		rotate: 360deg;
+		scale: 0;
+	}
+}
 </style>