Misskey: アバター等で背景が透過されない

[sym-dev]

💡 Summary

Webクライアントで、背景を透明にしたPNG画像などをアイコンにしたとき、v10以前だと透過されていたがv11以降だと透過されていない

📝 Steps to Reproduce

• 透過画像をアバターにする

📌 Environment

Misskey v11

[u1-liquid]

placeholderの色が表示される模様

[syuilo]

良い解決策募集

思いついたもの:
アバターのレンダリングをCSSのbackground-imageではなくimgタグで描画するようにして、描画完了イベントに合わせてplaceholder色を解除するようにする
懸念: imgタグでCSSのcoverの挙動と同等のものを実現できるか
imgタグに対してCSSのobject-fitプロパティを設定すればいけそう...?

[mei23]

• もうアバターが表示されないパターンはないはずなので、アバターには背景色を使わない
• v10のように透過画像なら背景色も表示しない (アバターにも添付にも適用になる)

とか

[syuilo]

アバターには背景色を使わない

もちょっと考えたんですが、回線が遅いと読み込みまでに空白が表示されちゃうのでやっぱり背景色はあった方が良さそう

[syuilo]

v10方式は透過かどうかの検出・提供だったり透過だった場合の分岐を実装しないといけなくて複雑さが増すので廃止したんですよね

[mei23]

透過分岐がないと、ほぼ同色の透過画像が背景色で埋もれちゃうんですね

[u1-liquid]

https://github.com/hilongjw/vue-lazyload とか使う？

[syuilo]

とりあえずimgタグで代用できるかやってみます