mastodon-japan.net は、数々の独立したMastodonサーバーのうちのひとつです。サーバーに登録してFediverseのコミュニティに加わってみませんか。
こちらはMastodon Japan Server、日本居住および日本語話者向けの汎用サーバーです。 ただし日本国外居住者及び非日本語話者を除外するものではありません。ルール(利用規約)をご確認の上で平和に遊ぼう。

サーバーの情報

2.2K
人のアクティブユーザー

メールを見ていて、縦に参列のスタイルで一番右がメール本文。真ん中のタイトル選択でメール本文が切り替わる。
問題は、メールを切り替えた時に、前のメールのスクロールが残ったままであること。次のメールが途中から表示されて一番上までスクロールしないと最初から見られないこと。以前はこんなことがなかった。
何の かは不明。

での メールのバグ。再現したな…。以前はこんなことはなかった。今日からのような気がする。 では未確認。

閲覧ウィンドウを下にしても再現した。 とかでもスクロール状態を記憶するのは便利な機能として使われてるけど、他のメールを見た時に既にスクロールされていて一番上から見られないのはダメだよね。

なぜかWindowsのメールアプリがログアウト状態だった。仕様変更があった感じ。それはともかく、そっちでは他のメールを選択した時に前のメールのスクロールが記憶されているということはなかった。たぶん でも同様だろう。 の問題かな?
でも、EdgeではFireFoxでは起こらないバグが起こったりするからな…。

とりあえずフィードバックしておいた。いつものように無視されるのだろうけど。

メールをみるとメールを開いた時の表示位置が前に見たメールでスクロールしたままだと頭から表示されない問題。
メールの表示サイズが100%なんだけど、縮小した状態に変えると頭から表示される。

メールをみるとメールを開いた時の表示位置が前に見たメールでスクロールしたままだと頭から表示されない問題。

たぶんFirefoxのバグ。
更新してなかった別のPCのver.114.02では問題が起きなかった。そのPCで119.0にバージョンアップしたら問題が再現した。

mastodon-japan.net/@ishii00141

バグを再現できる簡単なコードを作れれば、分かりやすく問題を指摘できるのに…。

メールをみるとメールを開いた時の表示位置が前に見たメールでスクロールしたままだと頭から表示されない問題。

"変更点は、以下の通り。

Facebookでスクロール位置が予期せずジャンプする原因となる問題の修正
"
「Firefox 119」を試す - Firefox Viewに新機能が追加 | マイナビニュース
news.mynavi.jp/article/2023102

この修正が原因ではないか?

マイナビニュース · 「Firefox 119」を試す - Firefox Viewに新機能が追加c-bou

「バグを再現できる簡単なコード」を作成してみようと思って、 に助けてもらった。

私: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;
}

このコードを基本にして、バグを再現するコードが作れるかもしれない。

だめだ。 でも再現しちゃった。すると、これは仕様か?
もう少しコードを検討する。

こんな状態。
「一つ目」と「二つ目」のボタンがあって、「一つ目」をクリックして表示画面でスクロールした後に「二つ目」をクリックすると最初から同じ位置までスクロールされた状態で表示される。
でも でも確認できたので、それが仕様で、頭から表示させるためには他のコードを追加する必要があるのかもしれない。
それはともかく、Firefox で メールを見た時に、メールを切り替えると、同じような状態になる。Edgeでは再現できない。

コンテンツを切り替えてもスクロールが維持されてしまう問題
hitorinezumi.starfree.jp/test2

hitorinezumi.starfree.jpコンテンツを切り替えてもスクロールが維持されてしまう問題

に教わった。
私:次のコードで「一つ目」をクリックした後にスクロールしてから「二つ目」をクリックすると、スクロールされた状態で表示されてしまいます。「一つ目」「二つ目」を切り替えた際に、ちゃんと最初から表示されるようにするには、どんなコードを食買えたら良いですか?
(以下略)

bing:スクロール位置をリセットするには、コンテンツを変更した後にスクロール位置を明示的に0に設定することで実現できます。以下のようにscrollTopプロパティを使用してスクロール位置をリセットすることができます。
(コード前略)
<script>
function changeContent(newContent) {
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = newContent;
contentDiv.scrollTop = 0; // スクロール位置をリセット
}
</script>

このコードではバグは再現されなかった。

を狙い撃ちしてバグを表示させるコードを教わった。でも、これじゃないよね…。

<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>

この後も頑張って再現しようとしたけれどできなかった。
諦め……られるかな…。

メールをみるとメールを開いた時の表示位置が前に見たメールでスクロールしたままだと頭から表示されない問題。

今試したら直ってた。
直ってることが確認する前にやったこと。
1.まず、ブラウザの表示全体を60%くらいまで縮小表示した。
2.その状態でメールの切り替え後もスクロール状態が維持されるか確認したら、維持されず、トップから表示されることが確認できた。
3.縮小表示していたブラウザを通常の表示に戻した。
4.その状態でメールの切り替え後にスクロールの状態が維持されてるか確認したら、維持されず、トップから表示された。

1.の前にスクロールの状態が維持されることを確認したような気がするが忘れた。確認しなかったかもしれない。すなわち、1.の前から直っていたのかもしれない。

Firefoxのバージョンは変わってない。変わったとしたらOutlookか、私が使ってるFirefoxの記憶か?
真相は不明。

その前に、 にバグ際限のコードを作らせようとチャットして何度もコードを修正させたのだけど、結局は作れなかった。userAgentなどでブラウザ判定をして誤魔化そうとするから、「EdgeとFirefoxとでのコードの解釈の違いのみを利用して、Edgeではスクロールの位置が維持されず、Firefoxでは維持されるようにしてください。」とお願いしたら、document.documentElement.scrollTop の解釈の違いを利用してuserAgentの代わりにブラウザ反対に使おうとしていて、document.documentElement.scrollTop って、私の短いサンプルコードでは結果が一緒で0なんじゃない?と思って、もしかして、Outlookのバグはそれが原因ではないかと思って、Fireoxでも「現在のスクロール位置」を0にするには縮小表示すればいいんじゃないかと思って60%まで縮小してみたら、スクロール状態が維持されるバグが再現されなかったので、では、バグを再現させようと縮小を解除して通常表示に戻したら、再建しなかった……と思ったら再現した。
つづく。

ブラウザ全体を60%まで縮小し、通常の100%まで戻したのだけど、その前のミス操作で、閲覧ウィンドウが90%に縮小されてた。あるいは、対処法として90%にしてそのままだったか。そのせいでバグが再現されなかっただけ。閲覧ウィンドウを100%にしたら、バグ再現。ブラウザでの表示全体を60%にしてもバグ再現。

残念。(/_・、)

メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。

対処法として閲覧ウィンドウを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が怪しい。

メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。
対処法として閲覧ウィンドウを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%);」にすると、メールを切り替えた時にスクロール状態がリセットされる。

このコードについて、 に尋ねてみた。

私:innerHTMLを使用して要素の内容を変更した場合、次のコードで、スクロール状態はリセットされますか?
style="transform: scale(0.9); transform-origin: left top 0px; height: calc(111.111%); width: calc(111.111%);"

つづく

:innerHTMLを使用して要素の内容を変更すると、その要素内のすべての子要素とイベントハンドラが削除されます。しかし、提供されたスタイルコードは要素のスクロール状態に直接影響を与えません。このスタイルは、要素のスケールと原点を変更し、高さと幅を調整しますが、スクロール位置はそのまま保持されます。

ただし、innerHTMLで要素の内容を変更すると、その要素のスクロール状態はリセットされる可能性があります。なぜなら、新しい内容が挿入されると、ブラウザはその要素を再描画し、その結果としてスクロール位置がリセットされるからです。(以下略)

私:innerHTMLで要素の内容を変更して、その要素のスクロール状態はリセットされる可能性があるのは、どのような場合ですか?

つづく

:`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:この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構造によっても変わる可能性があります。

メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。
対処法として閲覧ウィンドウを100%ではなく90%などに縮小しておけば良いというのは誤りだった。閲覧ウインドウの一番下までスクロールして試したら、メールの切り替えでスクロール位置は途中までし戻らなかったし、メールの長さの違いによっては、まったく戻らないケースもあった。

にこんな質問をしてみた。
私:Javascriptでコンテンツの先頭から表示させるコードとして、scrollIntoViewとscrollTopのどちらが良いと思いますか?

bing:`scrollIntoView`と`scrollTop`は、JavaScriptでスクロール操作を行うための2つの異なるメソッドですが、それぞれ異なる目的と使用ケースがあります。

つづく

:つづき
`scrollIntoView`と`scrollTop`は、JavaScriptでスクロール操作を行うための2つの異なるメソッドですが、それぞれ異なる目的と使用ケースがあります。

- `scrollIntoView`は、特定の要素がユーザーに見えるようにページをスクロールします¹。このメソッドは、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールするか(`alignToTop`が`true`の場合)、要素の下端がスクロール可能な祖先の表示範囲の下端に来るようにスクロールするか(`alignToTop`が`false`の場合)を制御できます¹⁵。また、スクロール動作(即座に行うか、滑らかにアニメーションさせるか)も制御できます¹。

- 一方、`scrollTop`は、要素の内容が垂直方向にスクロールされたピクセル数を取得または設定するためのプロパティです²。これは、要素内でのスクロール位置を操作するために使用されます³。

したがって、どちらが「良い」かは、あなたが達成しようとしている具体的なタスクによります。(以下略)

scrollIntoViewはFirefoxで、かなり以前からサポートされてたみたい。サポートが遅れていたのなら、Firefoxだけ別のコードscrollTopを使うソースになっているかもしれないと思ったのだが…。

Support Tables - scrollIntoView
runebook.dev/ja/docs/browser_s

runebook.devSupport Tables - scrollIntoView
いしい

Firefoxだけ別のコードでスクロール位置をリセットさせるようにして、Firefoxの方のコードを間違えてリセットされなくなってる、という感じでなら、 メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題を再現する簡単なコードのページは作れるのだけど…。

取り急ぎ、
Firefoxのabout:configの
layout.css.scroll-anchoring.enabled
がtrueになっているのをfalseにしたら、スクロール状態が維持されずに先頭から表示されるようになった。
理由は分からない。
明日以降に調べる。
他に不具合が生じるといけないから、trueに戻しておく。

スクロール状態が維持されてしまう該当箇所に次の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 がアンカーとして使用しているノードを layout.css.scroll-anchoring.highlight スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。

あるノードがアンカーとして適切でないと思われる場合は、以下のように overflow-anchor を使用してそのノードを除外することができます。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
developer.mozilla.org/ja/docs/

layout.css.scroll-anchoring.highlightをtrueにしてから、Outlookメールの閲覧ウインドウをスクロールした後、他のメールを選択しようとマウスのポインタを次のメールの上に持って行くと(閲覧ウインドウの外に移動しただけ)、閲覧ウインドウの見えている所の一番上が紫色になることを確認した。スクロールアンカリングが機能しているということだろう。

追記:
スクロールアンカリングが有効ならハイライトされ、無効ならハイライトがない。

developer.mozilla.orgスクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDNウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

スクロールアンカリングがメールソフトで機能するメリットもある。
私はそんなことはしないが、複数のメールを交互に見たい場合、メールを切り替えるたびにスクロールが先頭に戻ってしまっては不便。そんなときにはスクロールアンカリングが必要。Outlookメールでは、それを可能にしようと仕様変更して、Edgeでは機能してなかったということか?
好意的に考え過ぎかな?
メールを切り替えた時に先頭から表示されないと、少なくとも、私には不便。

"ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
developer.mozilla.org/ja/docs/

この問題がOutlookメールで起こっていたのなら、スクロールアンカリングが機能していた方が良い。
でも、メールを切り替えた時には先頭から表示されるようにしてほしい。

developer.mozilla.orgスクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDNウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

"Facebookでスクロール位置が予期せずジャンプする原因となる問題の修正
"
「Firefox 119」を試す - Firefox Viewに新機能が追加 | マイナビニュース
news.mynavi.jp/article/2023102

この修正が原因の可能性がある。
Facebookでのバグも、layout.css.scroll-anchoring.enabled
がtrueになっているのをfalseにすれば解決したらしい。
今回の修正は、このscroll-anchoringの修正だろう。

マイナビニュース · 「Firefox 119」を試す - Firefox Viewに新機能が追加c-bou

"(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
connect.mozilla.org/t5/discuss

ただ、このアドバイスへの返信は
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."

connect.mozilla.org/t5/discuss

"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
connect.mozilla.org/t5/discuss

こんな返信もあった。スレッドを立ち上げた人。

"メモ: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。
"
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
developer.mozilla.org/ja/docs/

この記述は不十分。
これだと、親に style="overflow-anchor: none;" を入れれば、その子孫要素は全て"overflow-anchor: none;"のようになるかのようであるが、実際は違う。

developer.mozilla.orgスクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDNウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

"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
drafts.csswg.org/css-scroll-an

注: overflow-anchor: none 要素の子孫に対してスクロール アンカーを「オンに戻す」ことはできません。 ただし、子孫スクロール コンテナは、明示的に overflow-anchor: none も設定されていない限り、(独自のスクロール ボックスに対して) 自動的に「オンに戻します」。

drafts.csswg.orgCSS Scroll Anchoring Module Level 1

この『明示的に overflow-anchor: none も設定されていない限り、(独自のスクロール ボックスに対して) 自動的に「オンに戻します」』によって、Outlookメールではスクロールアンカリングによって、メール切り替え時にスクロール位置がリセットされなくなったのかもしれない。これまでは、自動的にオンに戻らなかったので問題が生じなかったのかもしれない。Edgeでも自動的にオンに戻らないので問題が生じないのかもしれない。
ただし、bodyで無効にした場合は、オンに戻らないのかもしれない。これはOutlookメールでオンに戻らないことを確認した。

追記、bodyに入れてみたけれど、無効にならなかった。さっきはなったのに…。

bodyに入れて確認したのは間違いだった。
style="overflow-anchor: none;"をbodyタグに入れようとして失敗してたから、
「.customScrollBar, body」に「overflow-anchor: none;」を入れたから、.customScrollBarの方に入れたことで、無効にできたんだ。

"あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます
"
Stylus – 🦊 Firefox (ja) 向け拡張機能を入手
addons.mozilla.org/ja/firefox/

これをインストールして、
Outlookメール用のスタイルシートを作成して、
*{overflow-anchor: none;}
を記載した。
これで、Outlookメールのサイトでだけ、スクロールアンカリングを無効にできたと思う。
試してみたら、大丈夫そう。

ただ、これを使ってると、OutlookメールのサイトやFirefoxの更新でバグ?が解消されても分からないよね。

addons.mozilla.orgStylus – 🦊 Firefox (ja) 向け拡張機能を入手Firefox 向け Stylus をダウンロード。お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます。

メールが では前に見たメールのスクロール位置が次のメールのスクロール位置になってしまうバグ。
*{overflow-anchor: none;} でスクロールアンカリングを無効にすることで対処できるのだけど、スクロールアンカリングが有効でも、複数のメールを選択して削除した場合は、削除後に表示されるメールは先頭から表示される。閲覧ウインドウにメールを表示する仕組みが一つ削除した場合と複数を選択して削除した場合とで異なるのかもしれない。

メールはメールの画像をメール送信サイトから取得しているからスクロールした後に上の方で画像が表示されてスクロールアンカリングが機能してないと見ている位置から上に戻ってしまうことがある。だからスクロールアンカリングは必要。{overflow-anchor: none;}にするのではなく、別のメールを選択した時には一番上から表示するようなコードが必要。

メールを で見た場合、スクロールアンカリングが機能していることを確認した。それにもかかわらず、別のメールを選択した場合には先頭から表示される。
これは、Outlookメールが、別のメールを選択して閲覧ウインドウに表示させる場合に、 では別のコードを利用しているということか?そして、先頭から表示させるコードが抜けてしまっているということか?

style="overflow-anchor: none;" のテストページ。

ボックスの中をスクロールしてから10秒待って、スクロール位置が移動しなければ、スクロールアンカリングが有効。移動すれば、style="overflow-anchor: none;" が機能してる。

overflow-anchorテスト(noneなし)
hitorinezumi.starfree.jp/test2

overflow-anchorテスト(スクロールボックスdivにnone追加)
hitorinezumi.starfree.jp/test2

overflow-anchorテスト(bodyにnone追加)
hitorinezumi.starfree.jp/test2

hitorinezumi.starfree.jpoverflow-anchorテスト(noneなし)

メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。

Firefoxのバグかもしれない。
他のサイトでサイドバーのメニューをクリックして表示を切り替える時、先頭から表示されてないことがあった。私がスクロールしたのが残っていたのかと思っていたが、一番上に戻した後、別のメニューのページを見て、下の方にスクロールした後に戻ったら、やはり先頭から表示されず、既にスクロールされていた。
Outlookメールと同じ原因かもしれない。

メールを見た時、閲覧ウィンドウのスクロール状態が別のメールを見た時にも維持されてメールの一番上から表示してくれない問題。

今試したら、直ってはいないけれど、メールを選択した場合は切り替えたメールが先頭から表示されるようになってる気がする。
ただ、直ってないというのは、メールを削除した時に次のメールが表示されるのだけど、その時にはスクロールの位置が残ってしまってる。
ただ、メールの切り替えで先頭から表示されるようになったということは、Microsoftが直そうとしているのかな?

直ったら直ったで、何が原因だったか、知りたいな…。

私は単に興味があるだけだけど、バグが生じた場合、その原因を共有すれば、他の人が同じプログラムミスをしないために役立つと思うんだよな…。

メールを見た時、削除したメールのスクロール状態が次に表示されたメールにも維持されてしまって先頭から表示されない問題。
次のCSSを追加することで解決するのだけど…。
*{overflow-anchor: none;}
どうしてなのだろう?
overflow-anchorは、表示されている所より上に画像などが後から追加されることで表示位置がずれてしまうのを防ぐ機能。別のメールを表示した時にこの機能が働いているから先頭から表示されないのかもしれないけれど、別のメールの表示位置が維持されているのって、意味不明。