iOS+Safari環境にて、画像を多く掲載しているページ中にある&aname(ID){};で指定したアンカーへのリンクが、指定した位置から大幅にズレて表示されてしまいます。
iOS+Chrome及びPC環境ではズレないので、Safari側の仕様（？）なのかもしれませんが、こうした現象の回避は現状可能でしょうか？
WIKIWIKIユーザー助け合い掲示板
iOS+Safari環境でアンカーがズレる
7
コメント
views
6
フォロー
px
#
埋め込み先の背景色と馴染まない場合に指定して下さい。通常は埋め込み先の背景色をそのまま利用します。
px
wikiwikiスタイルでは文字サイズやフォントが自動的に調整されます。
次のコードをWIKIWIKIのページに埋め込むと最新のコメントがその場に表示されます。
// generating...
Windows+Firefox、androidで見ても違和感はないです。ズレるとはどの程度なのでしょうか。
結局wikiは以下のようにHtmlに変換するだけなので、それをどう解釈するのかはブラウザーのほうの問題のような気がします。(Htmlはあまり詳しくないので何が正し形化はわかりませんが。)
ありがとうございます。
ズレの程度は添付の動画の通り、かなり大幅なズレが発生します。
当方もSafari側の問題だと考えておりましたが、自身が管理している他のレンタルwikiサービス（Seesaa wiki）で管理しているWikiでは、こうしたアンカーのズレというものは発生しないので、ブラウザ側の問題と断定できないんですよね。
Wikiwiki運営に問い合わせ、修正を要望するべき案件なのでしょうか。
あるいは表示する画像の量や大きさに依存性があるか
アンカーが何を基準にジャンプ位置を決めてるのかは理解しておらず、見えてる状況からの推測ですが。画像を展開したときの大きさ分文章が下の方に押しやられてずれてる可能性が考えられます。
例えば、ページ読み込み、文書展開、ジャンプ完了、あとから画像展開されて、アンカー位置が下にずれる、ような。そう仮定したとき、予めページを完全に表示させておいてからなら、ずれないのではないかと。
一方で1つ目の見出しアンカーはちゃんとジャンプしており、anameとはなにか動作が違うようにみえます。インライン要素であることになにかあるのかもしれません。
何にせよwikiの書き方で工夫するアイディアは思いつきません。mac環境の方のアドバイスかwikiwikiの対応が必要と思います。
Lazy Load (画像遅延読み込み)が適用されブラウザ画面内に入ってから画像が表示されるようになりました。
アンカーで移動してから、画像が表示され、画像の高さ分、元の位置から大きくズレていることが考えられます。
画像のサイズを指定すると、最初から高さが確保されますので試してみてはどうでしょうか？
Lazy Load (画像遅延読み込み)
>> 3
>> 4
お二方とも、アドバイスいただきありがとうございます。
弥七様のご指摘頂いた通り、サンプルページに使用していた&attachrefの全て（MenuBarやHeader等含む）をサイズ指定に変更したところ、この問題は解決しました。
また、Seesaa Wikiでこの現象が発生しなかったのは、そちらではLazy Loadが導入されていない為でした。
本当に助かりました、ありがとうございます。
後学の為にご存知でしたら1つご教授いただければ幸いなのですが、この問題がiOS+Safariの環境のみで発生したのは、Lazy Loadで画像が読み込まれた際、他のコンテンツに与える挙動がiOS版Safariのみ異なるということで、wikiwiki側の問題ではないという理解で良いのでしょうか？
SafariはLazy-Loadにまだ対応してないのかもしれません。
Safari Lazy-Loadで検索するといくつかページヒットします。
ただ去年末くらいの記事なので最新情報はわかりません。
>> 6
そもそもLazy LoadそのものがHTMLの標準になったのが比較的最近のことなのですね、なるほど。
調べてみると現在のiOS 15に搭載されているSafariではやはり未対応だということが分かりました。
この度はお二方とも本当にありがとうございました。
（Safariユーザーを度外視するならともかく、）当面は画像のサイズは%指定ではなく絶対値で指定したほうが良さそうですね。