misskey-dev
[2025.5.0]エラー画像が横長になる
💡 Summary
エラー画面に表示される画像が横長に表示されます。
🥰 Expected Behavior
横長にならない
🤬 Actual Behavior
横長になる
📝 Steps to Reproduce
No response
💻 Frontend Environment
* Model and OS of the device(s):macOS 15.4.1
* Browser:Safari
* Server URL:misskey.7ka.org
* Misskey:2025.5.0
🛰 Backend Environment (for server admin)
* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:
Do you want to address this bug yourself?
- [ ] Yes, I will patch the bug myself and send a pull request
弊サーバーで試験的にトップページから新規登録して気付いたのですが、登録されて最初に見る画面がホームタイムラインの「ノートはありません」であり本件が強烈に映るため、可能なら優先めに対応していただけると助かります。
デグレなのか別件なのか本体のことをよく存じないのですが、同事象としてこちらを思い起こします。 related?: https://github.com/misskey-dev/misskey/issues/9597
2025.5.0ってプレフィクスされているので、2025.4.1以前ではなかった症状だと思っています。 なので、別件ではないかなぁという気はしつつも見立てが合っている自信はあまりありません
他所様の v2025.4.1 サーバーと弊 v2025.5.0 サーバーをブラウザの F12 ツール越しに見比べました。 当該 img タグを挟んでいる div タグの class に追加された _gaps が気になりました。 （以下、v2025.5.0 側に弊サーバーの Cloudflare からの加工が有るかも知れませんがそのまま載せます。）
v2025.4.1
<div class="_fullinfo">
<img src="https://********" draggable="false">
<div>指定されたURLに該当するページはありませんでした。</div>
</div>
v2025.5.0
<div class="x7arA _gaps">
<!---->
<img src="https://********" draggable="false" class="xpZXN">
<!---->
<div style="opacity: 0.7;">指定されたURLに該当するページはありませんでした。</div>
</div>
実際、v2025.4.1 側の同箇所にもこの _gaps を付与すると本事象が再現し、逆に v2025.5.0 側でこの _gaps を外すと正常なアスペクト比に映るよう伺えました。
related?: https://github.com/misskey-dev/misskey/pull/15963
頂いたチケット先によると packages/frontend/src/components/global/MkResult.vue の7行目にて _gaps の追加が伺えました。 https://github.com/misskey-dev/misskey/pull/15963/files#diff-fbaa3051133bb04f49f1e6031abc475c4ca6be30bfeaa1cd94a691e67ef3432cR7
v2025.5.1 に更新された様子のサーバーを何件か見に行っての報告でございますが、aspect-ratio: 1; が確かに追加されたにも拘らずタイトルの現象は続いているようです。
また、リリースノートに本件が無いようですが、この為にダブルチェックから外れたりされていませんでしょうか。
本件、_gaps に含まれる display: flex; が暗黙的に適用している align-items: normal; が子要素の本画像に align-items: stretch; 的に働いて横いっぱいに引き伸ばされているものと伺えます。
また、画像側で単に画像幅を制御できたとして今度は align-items: start; 的に働いて左寄せに配置される懸念も残ります。
https://developer.mozilla.org/ja/docs/Web/CSS/align-items
本ケースでは object-fit: contain; が画像側に同梱されていると少なくとも横に引き伸ばされず中央に配置される様です。
こちらと aspect-ratio: 1; 等を同梱されるかは想定する拡大率に依るかと存じます。
適用順序など厳密な仕様を知らず、ググると散見された QA を交えての調査ではございますが、ご参考になれば幸いです。
本件、未だお手製の画像が横に引き伸ばされ続けて辛い方は、SVGファイル内に対象の画像を埋め込んだimageタグを貼る形でラップすれば一応回避出来るようですので（応急措置でありレスポンスやデータ量など何かと目を瞑りますが）ご参考まで。
I guess a temporary solution is creating a SVG text file, importing the original file. As @kleuzjatob has kindly suggested.
my-image.svg
<svg xmlns="http://www.w3.org/2000/svg">
<image href="my-image.jpg" />
</svg>