iOS+Safari環境にて、画像を多く掲載しているページ中にある&aname(ID){};で指定したアンカーへのリンクが、指定した位置から大幅にズレて表示されてしまいます。
サンプル
iOS+Chrome及びPC環境ではズレないので、Safari側の仕様(?)なのかもしれませんが、こうした現象の回避は現状可能でしょうか?
Windows+Firefox、androidで見ても違和感はないです。ズレるとはどの程度なのでしょうか。 結局wikiは以下のようにHtmlに変換するだけなので、それをどう解釈するのかはブラウザーのほうの問題のような気がします。(Htmlはあまり詳しくないので何が正し形化はわかりませんが。)
<p><a class="anchor" id="id_sample_2" name ="id_sample_2"></a>左空白に&aname<br />
ありがとうございます。 ズレの程度は添付の動画の通り、かなり大幅なズレが発生します。
当方もSafari側の問題だと考えておりましたが、自身が管理している他のレンタルwikiサービス(Seesaa wiki)で管理しているWikiでは、こうしたアンカーのズレというものは発生しないので、ブラウザ側の問題と断定できないんですよね。 Wikiwiki運営に問い合わせ、修正を要望するべき案件なのでしょうか。
アンカーが何を基準にジャンプ位置を決めてるのかは理解しておらず、見えてる状況からの推測ですが。画像を展開したときの大きさ分文章が下の方に押しやられてずれてる可能性が考えられます。 例えば、ページ読み込み、文書展開、ジャンプ完了、あとから画像展開されて、アンカー位置が下にずれる、ような。そう仮定したとき、予めページを完全に表示させておいてからなら、ずれないのではないかと。 一方で1つ目の見出しアンカーはちゃんとジャンプしており、anameとはなにか動作が違うようにみえます。インライン要素であることになにかあるのかもしれません。
何にせよwikiの書き方で工夫するアイディアは思いつきません。mac環境の方のアドバイスかwikiwikiの対応が必要と思います。
Lazy Load (画像遅延読み込み)が適用されブラウザ画面内に入ってから画像が表示されるようになりました。 アンカーで移動してから、画像が表示され、画像の高さ分、元の位置から大きくズレていることが考えられます。 画像のサイズを指定すると、最初から高さが確保されますので試してみてはどうでしょうか?
Lazy Load (画像遅延読み込み)
【お知らせ】画像転送量を約50%削減することに成功しました。attachref ref に Lazy Load (画像遅延読み込み)を適用、これにより表示領域外の画像は読み込まれません。fold や accordion で隠した部分にも対応、開いてから読み込みを開始します。不要な読み込みを減らしパフォーマンスが改善しました。— WIKIWIKI (@WIKIWIKI_Japan) February 9, 2021
【お知らせ】画像転送量を約50%削減することに成功しました。attachref ref に Lazy Load (画像遅延読み込み)を適用、これにより表示領域外の画像は読み込まれません。fold や accordion で隠した部分にも対応、開いてから読み込みを開始します。不要な読み込みを減らしパフォーマンスが改善しました。
>> 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ユーザーを度外視するならともかく、)当面は画像のサイズは%指定ではなく絶対値で指定したほうが良さそうですね。
不適切なコンテンツとして通報するには以下の「送信」ボタンを押して下さい。 現在このグループでは通報を匿名で受け付けていません。 管理者グループにはあなたが誰であるかがわかります。
どのように不適切か説明したい場合、メッセージをご記入下さい。空白のままでも通報は送信されます。
通報履歴 で、あなたの通報と対応時のメッセージを確認できます。
トピックを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ユーザーを度外視するならともかく、)当面は画像のサイズは%指定ではなく絶対値で指定したほうが良さそうですね。