Chromeにおいて$[sparkle xxx]のエフェクトが上手く表示されない

[samunohito]

💡 Summary

chromeにおいて、sparkleを使用した際に☆のエフェクトが上手く表示されません。

firefoxでの表示

chromeでの表示

firefoxのように☆エフェクトが間断なく表示されることが想定動作だと考えられますが、chromeでは沈黙しています。
まれに短時間の間だけエフェクトが出たりもするので、不安定な動作となっています。

※動きのあるMFMは有効となっています（shakeで確認済み）

🥰 Expected Behavior

chromeでもfirefoxのように間断なく表示される

🤬 Actual Behavior

不安定な動作

📝 Steps to Reproduce

1. 動きのあるMFMを有効化する
2. sparkleを使用したノートを作成する

💻 Frontend Environment

いずれもdevelop最新のローカル環境で確認しました。

- Windows11 + FireFox(x64 127.0.2) = 動作する
- Windows11 + Chrome(x64 126.0.6478.127) = 動作しない
- Windows11 + Edge(x64 126.0.2592.87) = 動作しない
- Windows11 + Vivaldi(x64 6.8.3381.46) = 動作しない
- Android13 + Chrome(126.0.6478.122) = 動作しない
- iPhoneSE3(17.2.1) + Safari = 動作する

🛰 Backend Environment (for server admin)

-

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

[kakkokari-gtyih]

Related to #13160

[samunohito]

試す限り、以下の部分の動作に差がありそうです。

misskey/packages/frontend/src/components/MkSparkle.vue

Lines 48 to 66 in c1514ce

	<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"
	/>

以下、推測。

1. 上記のアニメーション設定をコメントアウトすると☆自体はレンダリングされている
2. ☆の削除までの時間を延ばし、アニメーション回数を2回以上にすると遅れて動き出す（ただし、repeatCount=2だと1回分しか動かない）
3. ☆が表示された時点で内部ではアニメーションが動作してる判定になっている？
4. 1 + 2+ 3 = アニメーション1回ぶんの動作はしている扱いになっているが表面上では動いていない

の理屈で…scaleのアニメーションも上記によりサイズ0の状態から動かずに消える＝見た目上☆が表示されない…みたいな感じになっているのではないかなと

[kakkokari-gtyih]

https://misskey-hub.net/ja/docs/for-users/features/mfm/#%E3%82%AD%E3%83%A9%E3%82%AD%E3%83%A9

コレ前まではChromeでも表示できていたけど今見たら表示できなくなってるのでChrome側の仕様が変わった可能性も

[kakkokari-gtyih]

https://misskey-hub.net/ja/docs/for-users/features/mfm/#%E3%82%AD%E3%83%A9%E3%82%AD%E3%83%A9

コレ前まではChromeでも表示できていたけど今見たら表示できなくなってるのでChrome側の仕様が変わった可能性も

スマホ（Android Chrome）ではうまくいかなかったけどPCではうまくいったりいかなかったりするみたい

[tai-cha]

• Windows11 + Chrome(x64 126.0.6478.127) = 動作しない
• Windows11 + Edge(x64 126.0.2592.87) = 動作しない
• Windows11 + Vivaldi(x64 6.8.3381.46) = 動作しない
• Android13 + Chrome(126.0.6478.122) = 動作しない

オープンソース版Chromiumで試して動かなかったらChromium系で描画できないの確定かも

[KisaragiEffective]

$[sparkle aaa]の結果 (参考、やたらとchromiumのバージョンが古いので追試する必要がある):
https://github.com/misskey-dev/misskey/assets/48310258/c45bfaf8-fc13-476e-9004-a25bb3dd9c7d

$ chromium --version
Chromium 121.0.6167.139 built on Debian 12.4, running on Debian 12.6

---

nix経由でも再現した

$ nix-env --query 
nix-2.23.3
ungoogled-chromium-126.0.6478.126
$ chromium --version
Chromium 126.0.6478.126 

[syuilo]

tasukete