レポート · 失敗分析 · 解決
CaveMinerカバー画像に横線が出た原因と修正
分割画像をブラウザ上で合成したことで発生した境界線を、ビルド時に1枚へ結合する方式へ変更して解消しました。
公開:
発生したこと
CaveMinerのカバー画像をプロジェクトカードと詳細ページへ追加したところ、画像内に複数の横線が表示されました。カードをマウスオーバーした場合だけでなく、通常表示やスマートフォンでも確認できました。
元画像は1枚でしたが、リポジトリへ登録する際に複数の横長画像へ分割し、HTMLとCSSで縦方向に並べていました。
確認できた事実
- 横線の位置は分割画像の境界と一致していました。
- ホバー時の拡大を無効にしても、横線は残りました。
gap: 0やline-height: 0を設定しても解消しませんでした。- PCとスマートフォンの両方で再現しました。
- 詳細ページでは、分割要素のレイアウト条件が不足し、一部の帯だけが表示される問題も発生しました。
これらの結果から、ホバーアニメーションではなく、複数のラスター画像をブラウザ上で別要素として拡縮・配置していたことが原因だと判断しました。
原因
各画像は独立した要素として描画されます。表示サイズが元のピクセル寸法と一致しない場合、境界位置が小数ピクセルになり、補間処理によって背景色や隣接画像との差が細い線として見えることがあります。
見た目では1枚に見える構成でも、ブラウザにとっては6枚の別画像でした。そのため、CSSで隙間をゼロにしても境界線の発生経路をなくせませんでした。
対応
公開ページで分割画像を直接並べる方式を廃止しました。
現在は、Astroの型チェックとビルドを開始する前にNode.jsスクリプトを実行し、6個の素材を1つのSVGへまとめています。境界部分はごくわずかに重ね、結合後のSVGを通常のimg要素1つとして表示します。
このSVGはベクターイラストではありません。内部にはWebP形式のラスター画像が埋め込まれています。SVGは、複数素材を1枚として配置するための入れ物として使用しています。
検証結果
- プロジェクト一覧のカードで横線が表示されないことを確認しました。
- マウスオーバー時にも横線が発生しないことを確認しました。
- 詳細ページで画像全体が表示されることを確認しました。
- PCとスマートフォンの両方で確認しました。
- 翻訳チェック、Astro型チェック、本番ビルドが成功しました。
今回の問題から、連続した1枚のビジュアルを複数の画像要素で再構成しないことを、今後のカバー画像実装ルールに追加します。