閲覧ウィンドウを下にしても再現した。#X とかでもスクロール状態を記憶するのは便利な機能として使われてるけど、他のメールを見た時に既にスクロールされていて一番上から見られないのはダメだよね。
とりあえずフィードバックしておいた。いつものように無視されるのだろうけど。
バグを再現できる簡単なコードを作れれば、分かりやすく問題を指摘できるのに…。
#Firefox で #Outlook メールをみるとメールを開いた時の表示位置が前に見たメールでスクロールしたままだと頭から表示されない問題。
"変更点は、以下の通り。
Facebookでスクロール位置が予期せずジャンプする原因となる問題の修正
"
「Firefox 119」を試す - Firefox Viewに新機能が追加 | マイナビニュース
https://news.mynavi.jp/article/20231025-2802140/
この修正が原因ではないか?
「バグを再現できる簡単なコード」を作成してみようと思って、#bing に助けてもらった。
私:iframeの中に表示するコンテンツを切り替えるコードのようなiframeを使わないコードが欲しい。
bing:もちろん、iframeを使わずにコンテンツを切り替えることは可能です。JavaScriptを使用して、特定の要素の内容を動的に変更することができます。以下に簡単な例を示します。
// HTML
<div id="content"></div>
<button onclick="changeContent('Hello, World!')">Click me</button>
// JavaScript
function changeContent(newContent) {
document.getElementById('content').innerHTML = newContent;
}
このコードを基本にして、バグを再現するコードが作れるかもしれない。
だめだ。#Edge でも再現しちゃった。すると、これは仕様か?
もう少しコードを検討する。
こんな状態。
「一つ目」と「二つ目」のボタンがあって、「一つ目」をクリックして表示画面でスクロールした後に「二つ目」をクリックすると最初から同じ位置までスクロールされた状態で表示される。
#Edge でも #Firefox でも確認できたので、それが仕様で、頭から表示させるためには他のコードを追加する必要があるのかもしれない。
それはともかく、Firefox で #Outlook メールを見た時に、メールを切り替えると、同じような状態になる。Edgeでは再現できない。
コンテンツを切り替えてもスクロールが維持されてしまう問題
http://hitorinezumi.starfree.jp/test20231028-1.html
#bing に教わった。
私:次のコードで「一つ目」をクリックした後にスクロールしてから「二つ目」をクリックすると、スクロールされた状態で表示されてしまいます。「一つ目」「二つ目」を切り替えた際に、ちゃんと最初から表示されるようにするには、どんなコードを食買えたら良いですか?
(以下略)
bing:スクロール位置をリセットするには、コンテンツを変更した後にスクロール位置を明示的に0に設定することで実現できます。以下のようにscrollTopプロパティを使用してスクロール位置をリセットすることができます。
(コード前略)
<script>
function changeContent(newContent) {
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = newContent;
contentDiv.scrollTop = 0; // スクロール位置をリセット
}
</script>
このコードではバグは再現されなかった。
#bing に #Firefox を狙い撃ちしてバグを表示させるコードを教わった。でも、これじゃないよね…。
<script>
function changeContent(newContent) {
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<p id="top">' + newContent + '<\/p>';
if (navigator.userAgent.indexOf('Firefox') == -1) {
document.getElementById('top').scrollIntoView();
}
}
</script>
この後も頑張って再現しようとしたけれどできなかった。
諦め……られるかな…。
#Firefox で #Outlook メールをみるとメールを開いた時の表示位置が前に見たメールでスクロールしたままだと頭から表示されない問題。
今試したら直ってた。
直ってることが確認する前にやったこと。
1.まず、ブラウザの表示全体を60%くらいまで縮小表示した。
2.その状態でメールの切り替え後もスクロール状態が維持されるか確認したら、維持されず、トップから表示されることが確認できた。
3.縮小表示していたブラウザを通常の表示に戻した。
4.その状態でメールの切り替え後にスクロールの状態が維持されてるか確認したら、維持されず、トップから表示された。
1.の前にスクロールの状態が維持されることを確認したような気がするが忘れた。確認しなかったかもしれない。すなわち、1.の前から直っていたのかもしれない。
Firefoxのバージョンは変わってない。変わったとしたらOutlookか、私が使ってるFirefoxの記憶か?
真相は不明。
その前に、#Bard にバグ際限のコードを作らせようとチャットして何度もコードを修正させたのだけど、結局は作れなかった。userAgentなどでブラウザ判定をして誤魔化そうとするから、「EdgeとFirefoxとでのコードの解釈の違いのみを利用して、Edgeではスクロールの位置が維持されず、Firefoxでは維持されるようにしてください。」とお願いしたら、document.documentElement.scrollTop の解釈の違いを利用してuserAgentの代わりにブラウザ反対に使おうとしていて、document.documentElement.scrollTop って、私の短いサンプルコードでは結果が一緒で0なんじゃない?と思って、もしかして、Outlookのバグはそれが原因ではないかと思って、Fireoxでも「現在のスクロール位置」を0にするには縮小表示すればいいんじゃないかと思って60%まで縮小してみたら、スクロール状態が維持されるバグが再現されなかったので、では、バグを再現させようと縮小を解除して通常表示に戻したら、再建しなかった……と思ったら再現した。
つづく。
ブラウザ全体を60%まで縮小し、通常の100%まで戻したのだけど、その前のミス操作で、閲覧ウィンドウが90%に縮小されてた。あるいは、対処法として90%にしてそのままだったか。そのせいでバグが再現されなかっただけ。閲覧ウィンドウを100%にしたら、バグ再現。ブラウザでの表示全体を60%にしてもバグ再現。
残念。(/_・、)
#Firefox で #Outlook メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。
対処法として閲覧ウィンドウを100%ではなく90%などに縮小しておけば良いのだけど、違いは何か、コードの変化を確認した。
閲覧ウィンドウのメール本文の所のdivに style=""があるのだけど、リセットすると空欄だが90%にすると、次のコードが追加される。
style="transform: scale(0.9); transform-origin: left top 0px; height: calc(111.111%); width: calc(111.111%);"
100%にリセットして消えた後にF12の機能で強制的に上のコードを追加してやると、メールを切り替えた時のスクロールの維持が無くなって先頭から表示されるようになった。scale(0.9)をscale(1.0)にして試してみてもバグは生じなかった。これらのコードがどのように影響しているか、明日以降に考察する。
transform-originが怪しい。
#Firefox で #Outlook メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。
対処法として閲覧ウィンドウを100%ではなく90%などに縮小しておけば良いのだけど、110%に拡大した場合はスクロール状態がリセットされない。
90%にした場合には
style="transform: scale(0.9); transform-origin: left top 0px; height: calc(111.111%); width: calc(111.111%);"
が追加され、
110%にした場合には
style="transform: scale(1.1); transform-origin: left top 0px; height: calc(90.9091%); width: calc(90.9091%);"
が追加される。
要するに、110%でスクロール状態がリセットされないということは、上記コードは関係ないように思える。
ただし、閲覧ウィンドウを110%に拡大して、
style="transform: scale(1.1); transform-origin: left top 0px; height: calc(90.9091%); width: calc(90.9091%);"
が追加された後、「height: calc(90.9091%);」を「height: calc(101%);」にすると、メールを切り替えた時にスクロール状態がリセットされる。
このコードについて、#bing に尋ねてみた。
私:innerHTMLを使用して要素の内容を変更した場合、次のコードで、スクロール状態はリセットされますか?
style="transform: scale(0.9); transform-origin: left top 0px; height: calc(111.111%); width: calc(111.111%);"
つづく
#bing :innerHTMLを使用して要素の内容を変更すると、その要素内のすべての子要素とイベントハンドラが削除されます。しかし、提供されたスタイルコードは要素のスクロール状態に直接影響を与えません。このスタイルは、要素のスケールと原点を変更し、高さと幅を調整しますが、スクロール位置はそのまま保持されます。
ただし、innerHTMLで要素の内容を変更すると、その要素のスクロール状態はリセットされる可能性があります。なぜなら、新しい内容が挿入されると、ブラウザはその要素を再描画し、その結果としてスクロール位置がリセットされるからです。(以下略)
私:innerHTMLで要素の内容を変更して、その要素のスクロール状態はリセットされる可能性があるのは、どのような場合ですか?
つづく
#bing :`innerHTML`を使用して要素の内容を変更すると、その要素のスクロール状態がリセットされる可能性があるのは、主に以下のような場合です:
1. **要素の内容が大幅に変更される場合**:`innerHTML`を使用して要素の内容を大幅に変更すると、その要素の高さや幅が変わる可能性があります。これにより、スクロール位置がリセットされる可能性があります。例えば、要素の内容を完全に削除したり、新しい内容を追加したりすると、スクロール位置はリセットされます。
2. **要素が再描画される場合**:`innerHTML`を使用して要素の内容を変更すると、ブラウザはその要素を再描画します。この再描画プロセス中に、ブラウザはスクロール位置をリセットする可能性があります。
3. **子要素が削除される場合**:`innerHTML`を使用して要素の内容を変更すると、その要素内のすべての子要素が削除されます。これにより、スクロール位置がリセットされる可能性があります。
これらは一般的なシナリオであり、具体的な結果はブラウザやコードの具体的な状況によります。(以下略)
実際、現在、次のコードを追加したコード、およびサンプル合うように調整したコードで、スクロール状態をリセットさせるサンプルページは作れていない。
style="transform: scale(0.9); transform-origin: left top 0px; height: calc(111.111%); width: calc(111.111%);"
そのコードの #bing による解説。
bing:このCSSスタイルは、要素のスケーリングと位置を制御しています。具体的には次のようなことを行っています:
- `transform: scale(0.9);`:これは要素のサイズを90%に縮小します。つまり、元の要素の大きさの90%になります。
- `transform-origin: left top 0px;`:これは変形(この場合はスケーリング)の基準点を要素の左上角に設定します。つまり、要素は左上から縮小されます。
- `height: calc(111.111%); width: calc(111.111%);`:これらは要素の高さと幅を元の大きさの111.111%に設定します。つまり、元の大きさよりも11.111%大きくなります。
これらのスタイルは一緒に使用すると、要素が少し大きくなりつつも、その内容は少し縮小され、左上からスケーリングされる効果が得られます。このようなスタイルは、特定の視覚効果を達成するためによく使用されます。具体的な効果は、他のCSSプロパティやHTML構造によっても変わる可能性があります。
#bing にこんな質問をしてみた。
私:Javascriptでコンテンツの先頭から表示させるコードとして、scrollIntoViewとscrollTopのどちらが良いと思いますか?
bing:`scrollIntoView`と`scrollTop`は、JavaScriptでスクロール操作を行うための2つの異なるメソッドですが、それぞれ異なる目的と使用ケースがあります。
つづく
#bing :つづき
`scrollIntoView`と`scrollTop`は、JavaScriptでスクロール操作を行うための2つの異なるメソッドですが、それぞれ異なる目的と使用ケースがあります。
- `scrollIntoView`は、特定の要素がユーザーに見えるようにページをスクロールします¹。このメソッドは、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールするか(`alignToTop`が`true`の場合)、要素の下端がスクロール可能な祖先の表示範囲の下端に来るようにスクロールするか(`alignToTop`が`false`の場合)を制御できます¹⁵。また、スクロール動作(即座に行うか、滑らかにアニメーションさせるか)も制御できます¹。
- 一方、`scrollTop`は、要素の内容が垂直方向にスクロールされたピクセル数を取得または設定するためのプロパティです²。これは、要素内でのスクロール位置を操作するために使用されます³。
したがって、どちらが「良い」かは、あなたが達成しようとしている具体的なタスクによります。(以下略)
scrollIntoViewはFirefoxで、かなり以前からサポートされてたみたい。サポートが遅れていたのなら、Firefoxだけ別のコードscrollTopを使うソースになっているかもしれないと思ったのだが…。
Support Tables - scrollIntoView
https://runebook.dev/ja/docs/browser_support_tables/scrollintoview
取り急ぎ、
Firefoxのabout:configの
layout.css.scroll-anchoring.enabled
がtrueになっているのをfalseにしたら、スクロール状態が維持されずに先頭から表示されるようになった。
理由は分からない。
明日以降に調べる。
他に不具合が生じるといけないから、trueに戻しておく。
"スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにもかかわらず、ユーザーが見ていた個所が表示域に留まり続けます。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
スクロール状態が維持されてしまう該当箇所に次のcssを追加することでスクロールがリセットされるようになった。
style="overflow-anchor: none;"
今回は、縮小表示でtransform関連のcssが挿入される個所に入れて試したが、その一つ上のdivのclassの一つ.Q8TCCに追加しても対処できた。たぶん同じdivにある他のclassでも対処できるし、bodyのcssへの追加も試したら対処できた。
layout.css.scroll-anchoring.enabled
のままの方が良いと思うので、サイトごとに無効にできるような方法があれば良い。
解説を読むと、この機能はEdgeにも備わっているはずだから、今回のバグはOutlookメールのコードの問題か?
でも、なぜEdgeなら問題が生じない?
謎は残ってる。
追記:「bodyのcssへの追加も試したら対処できた」は誤り。私のミスで、.customScrollBar に「overflow-anchor: none;」を入れた可能性がある。
Firefox scrolling jumps in Facebook - Mozilla Connect
https://connect.mozilla.org/t5/discussions/firefox-scrolling-jumps-in-facebook/td-p/9054
"解決した場合は、Firefox がアンカーとして使用しているノードを layout.css.scroll-anchoring.highlight スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。
あるノードがアンカーとして適切でないと思われる場合は、以下のように overflow-anchor を使用してそのノードを除外することができます。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
layout.css.scroll-anchoring.highlightをtrueにしてから、Outlookメールの閲覧ウインドウをスクロールした後、他のメールを選択しようとマウスのポインタを次のメールの上に持って行くと(閲覧ウインドウの外に移動しただけ)、閲覧ウインドウの見えている所の一番上が紫色になることを確認した。スクロールアンカリングが機能しているということだろう。
追記:
スクロールアンカリングが有効ならハイライトされ、無効ならハイライトがない。
スクロールアンカリングがメールソフトで機能するメリットもある。
私はそんなことはしないが、複数のメールを交互に見たい場合、メールを切り替えるたびにスクロールが先頭に戻ってしまっては不便。そんなときにはスクロールアンカリングが必要。Outlookメールでは、それを可能にしようと仕様変更して、Edgeでは機能してなかったということか?
好意的に考え過ぎかな?
メールを切り替えた時に先頭から表示されないと、少なくとも、私には不便。
"ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
この問題がOutlookメールで起こっていたのなら、スクロールアンカリングが機能していた方が良い。
でも、メールを切り替えた時には先頭から表示されるようにしてほしい。
"Facebookでスクロール位置が予期せずジャンプする原因となる問題の修正
"
「Firefox 119」を試す - Firefox Viewに新機能が追加 | マイナビニュース
https://news.mynavi.jp/article/20231025-2802140/
この修正が原因の可能性がある。
Facebookでのバグも、layout.css.scroll-anchoring.enabled
がtrueになっているのをfalseにすれば解決したらしい。
今回の修正は、このscroll-anchoringの修正だろう。
"(B) In the search box in the page, type or paste layout.css.scroll-anchoring.enabled and pause while the list is filtered
(C) Double-click the preference to switch the value from true to false
(That isn't a new feature, but maybe its behavior has changed somewhat.)
"
Firefox scrolling jumps in Facebook - Mozilla Connect
https://connect.mozilla.org/t5/discussions/firefox-scrolling-jumps-in-facebook/td-p/9054
ただ、このアドバイスへの返信は
This does not fix the issue.
で、問題が解決しなかったらしい。
追記
FFを再起動すれば解決したとか…。
それと、最後の一行のGoogle翻訳「(これは新しい機能ではありませんが、動作が若干変更された可能性があります。)」
今回も…かも。
"I added a couple of steps to this.
1. Changed it to false, quit FF, relaunched FF and verified the behavior did not change.
2. Changed it to true, quit FF, relaunched and scrolled. Eventually, the autoscroll behavior reappeared, but it seemed to work OK for awhile. Admittedly, hard to be sure.
But this suggests the 101 or 102 update broke parameter-checking; the fix may be to check scroll-anchoring.enabled after loading new material, before re-enabling screen display."
https://connect.mozilla.org/t5/discussions/firefox-scrolling-jumps-in-facebook/td-p/9054
"It works! I'm using Firefox 114.0.2 (64-bit). I've been trying to find a fix for the longest time and now your solution fixed my scrolling issue with Facebook. Thanks a million!
"
Firefox scrolling jumps in Facebook - Mozilla Connect
https://connect.mozilla.org/t5/discussions/firefox-scrolling-jumps-in-facebook/td-p/9054
こんな返信もあった。スレッドを立ち上げた人。
"メモ: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
この記述は不十分。
これだと、親に style="overflow-anchor: none;" を入れれば、その子孫要素は全て"overflow-anchor: none;"のようになるかのようであるが、実際は違う。
"Note: It is not possible to turn scroll anchoring "back on" for descendants of a overflow-anchor: none element. However, descendant scroll containers automatically "turn it back on" (for their own scrolling box) unless they explicitly have overflow-anchor: none set on them as well.
"
CSS Scroll Anchoring Module Level 1
https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api
注: overflow-anchor: none 要素の子孫に対してスクロール アンカーを「オンに戻す」ことはできません。 ただし、子孫スクロール コンテナは、明示的に overflow-anchor: none も設定されていない限り、(独自のスクロール ボックスに対して) 自動的に「オンに戻します」。
この『明示的に overflow-anchor: none も設定されていない限り、(独自のスクロール ボックスに対して) 自動的に「オンに戻します」』によって、Outlookメールではスクロールアンカリングによって、メール切り替え時にスクロール位置がリセットされなくなったのかもしれない。これまでは、自動的にオンに戻らなかったので問題が生じなかったのかもしれない。Edgeでも自動的にオンに戻らないので問題が生じないのかもしれない。
ただし、bodyで無効にした場合は、オンに戻らないのかもしれない。これはOutlookメールでオンに戻らないことを確認した。
追記、bodyに入れてみたけれど、無効にならなかった。さっきはなったのに…。
bodyに入れて確認したのは間違いだった。
style="overflow-anchor: none;"をbodyタグに入れようとして失敗してたから、
「.customScrollBar, body」に「overflow-anchor: none;」を入れたから、.customScrollBarの方に入れたことで、無効にできたんだ。
"あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます
"
Stylus – Firefox (ja) 向け拡張機能を入手
https://addons.mozilla.org/ja/firefox/addon/styl-us/
これをインストールして、
Outlookメール用のスタイルシートを作成して、
*{overflow-anchor: none;}
を記載した。
これで、Outlookメールのサイトでだけ、スクロールアンカリングを無効にできたと思う。
試してみたら、大丈夫そう。
ただ、これを使ってると、OutlookメールのサイトやFirefoxの更新でバグ?が解消されても分からないよね。
#Outlook メールはメールの画像をメール送信サイトから取得しているからスクロールした後に上の方で画像が表示されてスクロールアンカリングが機能してないと見ている位置から上に戻ってしまうことがある。だからスクロールアンカリングは必要。{overflow-anchor: none;}にするのではなく、別のメールを選択した時には一番上から表示するようなコードが必要。
style="overflow-anchor: none;" のテストページ。
ボックスの中をスクロールしてから10秒待って、スクロール位置が移動しなければ、スクロールアンカリングが有効。移動すれば、style="overflow-anchor: none;" が機能してる。
overflow-anchorテスト(noneなし)
http://hitorinezumi.starfree.jp/test20231031-2-0.html
overflow-anchorテスト(スクロールボックスdivにnone追加)
http://hitorinezumi.starfree.jp/test20231031-2-1.html
overflow-anchorテスト(bodyにnone追加)
http://hitorinezumi.starfree.jp/test20231031-2-2.html
直ったら直ったで、何が原因だったか、知りたいな…。
私は単に興味があるだけだけど、バグが生じた場合、その原因を共有すれば、他の人が同じプログラムミスをしないために役立つと思うんだよな…。