導入
Redmineを使っている人がハマりがちな既知の不具合として、画像の遅延表示によって、アンカーリンクの表示位置が狂う問題があります。原因や対策について整理しました。
環境
Redmine：5.0.0～6.1.0(本記事執筆時点最新)
用語の定義
アンカーリンク：見出しなど、Webページ内の指定した場所へ移動するリンク
遅延表示：画面を表示してから画像などを必要に応じて読み込むことで、ページ全体の表示速度を向上させる技術
概要
RedmineのWikiでは各見出しが自動的にアンカーリンクになります。アンカーリンクの遷移先のコンテンツよりも上部に埋め込み画像があると、別の画面からアンカーリンクを使って画面遷移した場合に表示位置がずれることがあります。その原因と対策について調査してみました。
原因
Redmine5.0.0で導入された埋め込み画像の遅延表示機能で、imgタグにloading=”lazy”が付与されたことで画像が表示される前にアンカーリンクの遷移先のコンテンツの位置までスクロールし、その後に画像が表示されるためになります。
詳細は以下のサイトをご参照ください。
- 参考サイト
- Feature #36294 Lazy load inline images
- Patch #41919 Add width and height to img src
対策
対策法1：Wiki管理者が可能な対策
![]()といったWiki記法を使わず、画像を添付した後に該当画像の相対パスをコピーして、imgタグを自分で記載することで、遅延表示させない従来の画像表示が可能となります。
対策法2：サーバ管理者が可能な対策
Wiki記法を定義している以下を修正してRedmineを再起動する。
- スクリプトファイル：app/helpers/application_helper.rb
- メソッド：def parse_inline_attachments(text, project, obj, attr, only_path, options)
- 行：”src=\”#{image_url}\”#{title_and_alt_attrs} loading=\”lazy\”#{other_attrs}”
- 変更内容：loading=\”lazy\”を削除する、lazyをeagerに書き換える等
まとめ
Wikiで画像を使ってナレッジを残すといった使い方はとても一般的な使い方だと思いますので、そのWikiのアンカーリンクに画面遷移する際は注意が必要となります。
初期表示高速化の代償ではありますが、早く公式に対応されることを望みます。
原因と対策を知ることでユーザが対応することも可能となりますので、本記事が役に立つと嬉しいです。
