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

samunohito commented 3 months ago

💡 Summary

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

firefoxでの表示 sp_firefox

chromeでの表示 sp_chrome

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

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

🥰 Expected Behavior

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

🤬 Actual Behavior

不安定な動作

📝 Steps to Reproduce

動きのあるMFMを有効化する
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 commented 3 months ago

Related to #13160

samunohito commented 3 months ago

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

https://github.com/misskey-dev/misskey/blob/c1514ce91dc08481a092a789ee37da546cdb4583/packages/frontend/src/components/MkSparkle.vue#L48-L66

以下、推測。

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

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

Sayamame-beans commented 3 months ago

iPadでは動作しているという話があったので、恐らくですがSafari系は大丈夫です(要検証)

Sayamame-beans commented 3 months ago

Frontend Environmentに書かれてました、すみません 🙏

kakkokari-gtyih commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

$[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 commented 3 weeks ago

tasukete

misskey-dev / misskey