導入
RedmineのWikiを運用していると、アンカーリンクの遷移位置がズレるという現象に遭遇することがあります。
特に、画像を多用したナレッジページでは再現しやすく、「リンク先に飛んだはずなのに少し下にズレている」という違和感が発生します。
本記事では、この現象の原因と、実務で取り得る対策を整理します。
環境
Redmine：5.0.0～6.1.0（執筆時点最新）
用語の定義
アンカーリンク：見出しなど、ページ内の特定位置へジャンプするリンク
遅延表示：画面表示時にすべての画像を読み込まず、必要になったタイミングで読み込むことで、初期表示速度を向上させる技術
概要
RedmineのWikiでは、見出しごとに自動でアンカーリンクが生成されます。
しかし、遷移先より上部に画像が配置されている場合、別ページからアンカーリンクで遷移すると表示位置がズレることがあります。
原因
Redmine 5.0.0以降では、埋め込み画像に対して loading=”lazy” が付与されるようになりました。
その結果、以下の順序で処理が進みます。
- ページ読み込み時点では画像の高さが確定していない。
- ブラウザがアンカー位置までスクロールする。
- その後、画像が読み込まれてレイアウトが再計算される。
- 結果として、表示位置が下方向にズレる。
- 詳細は以下のサイトをご参照ください。
- 参考サイト
- Feature #36294 Lazy load inline images
- Patch #41919 Add width and height to img src
対策
対策法1：Wiki管理者が可能な対策
方法①：imgタグを直接記述する
Wiki記法（![]()）を使わず、画像添付後にパスを取得し、HTMLで記述します。
<img src="/attachments/.../image.png">これにより loading=”lazy” が付与されず、従来通りの挙動になります。
方法②：画像サイズを明示する
マクロでサイズ指定を行い、レイアウトを事前確定させます。
{{thumbnail(image.png, size=300, title=Thumbnail)}}この方法は、「遅延読み込みは維持しつつズレを抑える」バランス型になります。
対策法2：サーバ管理者が可能な対策
方法③：Wiki記法を定義している以下を修正してRedmineを再起動する。
Rubyファイルを編集します。この対応は確実ですが、アップデート時の差分管理が必要になる点は注意が必要になります。
- スクリプトファイル：
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に書き換える等
まとめ
RedmineのWikiはナレッジ蓄積の中核になりやすいため、アンカーリンクの信頼性は意外と重要なUX要素です。
初期表示速度とのトレードオフではありますが、用途に応じて適切にチューニングする必要があります。
原因と対策を知ることにより、ユーザが対応することも可能となりますので、本記事が役に立つと嬉しいです。
