前回は、以下の手順で、私の環境（Android＋Chrome）でも発生しました。

• モバイルフッターボタンで、メニューを展開
• そのメニュー内のリンクをクリックし、ページを表示
• 戻るボタン

Android＋Chromeだけでなく、Windows10＋Chromeのデベロッパーツール上でも発生していました。

今回も、Android＋Chromeで確認してみましたが、上記手順では発生しないようです。

上記のように、箇条書きで、こういう手順で発生しますということを、具体的に順番に、書いていただいた方が良さそうに思います。
（複数パターンあるのであれば、全ての手順を書いていただくと助かります）

私は今のところ、どういう手順で発生するのか、再現できていません。

投稿者:: @robjhon

↑

スマホで閲覧した際に、ブラウザの戻るボタン、あるいは、スワイプして、前のページに戻ろうとすると、モバイルスライドインメニューが開いたままの状態で戻るようになりました。

Android＋Chromeの環境では、戻るボタンで発生しないんですよね。
（その他にも条件が？ それとも機種依存？）

●ご参考

iPhone+Safari固有の問題のようです。
私のiPhoneでも同様な現象を確認しました。

https://stray-light.info/wp/ios-safari-backbutton/

投稿者:: @chu-ya

↑

iPhone+Safari固有の問題のようです。
私のiPhoneでも同様な現象を確認しました。

https://stray-light.info/wp/ios-safari-backbutton/

Cocoonもこの対応をした方がいいのだろうか。

「bfcache」というものみたいです？

バックフォワード キャッシュ
https://web.dev/articles/bfcache?hl=ja

上記の記事には以下のようにありました。

bfcache は、パソコンとモバイルの両方で、長年にわたって Firefox と Safari の両方でサポートされています。

私のAndroidに、Firefoxをインストールしてみましたが、事象は発生せず・・・。

更には、以下のようにもあります。

Chrome バージョン 86 以降では、ごく一部のユーザーを対象に、Android のクロスサイト ナビゲーション用に bfcache が有効になっています。今後のリリースでは、追加のサポートが段階的にリリースされます。バージョン 96 以降では、パソコンとモバイルを使用するすべての Chrome ユーザーに対して bfcache が有効になっています。

Android＋Chromeや、Windows＋Chromeのデベロッパーツール上でも発生せず・・・。
うーん・・・良く分からんです。

かなり古いですが、以下の記事には・・・。

iOS safari の戻る/進むボタンと bfcache について
https://qiita.com/kyaido/items/5cf9482146b945a4bf67

 

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
  }
};

ただこの方法だと、bfcache が使用された場合に必ずリロードされてしまうので、実際には

リロード以外の処理でなんとかする
必要な時だけリロードさせる
などにしたほうが bfcache による体感速度の向上も保ったまま対策ができるので良いかと思います。

こんな書き方だったりします。

比較的新しい以下では、ブラウザによって挙動が違うニュアンスも？（直接関係ある内容ではないですが）

Yahoo! JAPAN Tech Blog
ブラウザの戻る/進むを高速に！ヤフーにおけるBFCache有効化に向けた取り組み
https://techblog.yahoo.co.jp/entry/2023072430429932/

話が難しいです。

とりあえず、tmp/mobile-sidebar-button.php の 16 行目 にでも autocomplete="off" を追加し、Safari で動作を確認するのがいいかもしれません。

<input autocomplete="off" 以下省略

autocomplete="off" で問題が解決しない場合は、pageshow イベントでの処理を試します。試す場合は、イベントハンドラではなく普通に addEventListener() を使うのがいいです。

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 処理を書く 
  }
});

また、今回のケースでは、リロードは不適切です。リロードしてしまうとスクロール位置を復元できなくなります。例えば、下にスクロールした位置から別のページに移動した後に戻ってきた時に、ページの先頭まで戻ります。これはユーザー体験を損ないます。サイドバーを閉じるだけでいいため、私であれば javascript.js の 158 行目以降 にある処理を行います。

※ サイドバー以外にも処理が必要な箇所はあるかもしれません。

バックフォワードキャッシュは、iOS や Safari 固有のものではありません。CLS の改善に効果があることから、Google はサイトにバックフォワードキャッシュを適用するよう推奨しています。

参考：ページが bfcache の対象であることを確認する

バックフォワードキャッシュについては、バックフォワード キャッシュ の説明が分かりやすいと思います。

ちなみに、ご質問者の robjhon さんのサイトはリクエストヘッダーの Cache-Control に no-store があるため、Chrome ではバックフォワードキャッシュは無効です。

投稿者:: @akira

↑

とりあえず、tmp/mobile-sidebar-button.php の 16 行目 にでも autocomplete="off" を追加し、Safari で動作を確認するのがいいかもしれません。

とりあえず autocomplete="off" 属性を追加しておきました。
https://github.com/xserver-inc/cocoon/commit/4877cc7cbb392fd193cfdd4a4ca3165e06c57763

もし不具合環境をお持ちの方がおられましたら試してみていただけると幸いです。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

皆様ご返信ありがとうございます。

@chu-ya さんが同様の現象を確認されたということで、私だけではないということで少し安心しました。

サーバーキャッシュ、ブラウザキャッシュをいずれも消去し、高速化を解除した状態で確認した結果をまとめました。

android（chrome）と、iphone11:Safari（ios16.3.1）では発生せず、

iphone14:Safari（ios16.5.1）だけ発生しました。

ホーム用テンプレートを使用していたので、そのテンプレートが影響しているかと思い、現在は、Cocoonのデフォルトテンプレートを使用しています。

また、@akira さんに教えて頂いた

<input autocomplete="off"

では改善しませんでした。

また、 javascript.jsの「})(jQuery);」直前に次のように追記して見ましたが、改善しませんでした。

// ページが表示されたとき（ブラウザバック含む）に実行
window.addEventListener('pageshow', function(event) {
  // ページがキャッシュから読み込まれた場合（ブラウザバック時など）
  if (event.persisted) {
    // モバイルサイドバーのチェックボックスを非選択にして閉じる
    $('#sidebar-menu-input').prop('checked', false);
  }
}, false);

以上を踏まえてテストした結果がこちらです。

＜テストの条件＞

ホーム起点で回遊するパターンと、記事起点で回遊するパターンの2つを試しました。

■テストA：ホーム起点で記事を回遊してホームに戻る

1.Google検索から「ジュエリークラフト」で検索してホーム画面を表示する（検索結果1番目）

2.ホーム画面の上段メニュー「記事」をタップして記事一覧ページに遷移する（target=_self）

3.記事一覧ページ見出し「新着記事」から、最初の記事に遷移する（target=_self）

4.遷移した記事下部のブログカードから、別のページ（カスタム投稿）に遷移する（target=_blank）

5.ブラウザバックで3に戻る

6.さらにブラウザバックで2に戻る（記事一覧ページ）

7.さらにブラウザバックで1に戻る（ホーム）

8.スマホ下部メニューを表示し「ホーム」をタップしてホームに遷移する（target=_self）

9.ホーム内見出し「新着記事一覧」から最初の記事に遷移する（target=_self）

10.遷移した記事下部のブログカードから、別のページ（カスタム投稿）に遷移する（target=_blank）

11.ブラウザバックで9に戻る

12.さらにブラウザバックで8に戻る（ホーム）

■テストB：記事起点で回遊してホームに戻る

1.Google検索から「石留め種類」で検索してホーム画面を表示する（検索結果1か2番目）

2.ホーム画面の上段メニュー「記事」をタップして記事一覧ページに遷移する（target=_self）

3.記事一覧ページ見出し「新着記事」から、最初の記事に遷移する（target=_self）

4.遷移した記事下部のブログカードから、別のページ（カスタム投稿）に遷移する（target=_blank）

5.ブラウザバックで3に戻る

6.さらにブラウザバックで2に戻る（記事一覧ページ）

7.さらにブラウザバックで1に戻る（石留め種類の記事）

8.スマホ下部メニューを表示し「ホーム」をタップしてホームに遷移する（target=_self）

9.ホーム内見出し「新着記事一覧」から最初の記事に遷移する（target=_self）

10.遷移した記事下部のブログカードから、別のページ（カスタム投稿）に遷移する（target=_blank）

11.ブラウザバックで9に戻る

12.さらにブラウザバックで8に戻る（ホーム）

■テストA

＜android:chrome＞

発生せず

＜iphone11:Safari（ios16.3.1）＞

発生せず

＜iphone14:Safari（ios16.5.1）＞

6.さらにブラウザバックで2に戻る（記事一覧ページ）で発生

7.さらにブラウザバックで1に戻る（ホーム）で発生

12.さらにブラウザバックで8に戻る（ホーム）で発生

■テストB

＜android:chrome＞

発生せず

＜iphone11:Safari（ios16.3.1）＞

発生せず

＜iphone14:Safari（ios16.5.1）＞

6.さらにブラウザバックで2に戻る（記事一覧ページ）

7.さらにブラウザバックで1に戻る（石留め種類の記事）

12.さらにブラウザバックで8に戻る（ホーム）

発生する条件はわかりましたが、原因と対策がわかりません。

よろしくお願い致します。

@robjhon さん

<input autocomplete="off"

では改善しませんでした。

robjhon さんの現在のサイトの場合は、tmp/mobile-sidebar-button.php ではなく tmp/mobile-navi-button.php の 16 行目 の <input> に autocomplete="off" を付けます。その後、「MENU」と書かれたボタンで動作を確認します。

※ robjhon さんは、autocomplete="off" が付いていない状態で動作を確認されたように思えます。autocomplete="off" がある状態の動作を知りたいです。

@akira さん、直りました！

tmp/mobile-navi-button.php の 16 行目 の <input> に autocomplete="off" を付けました。

いろいろ悩んでいたのが解決しました。

ありがとうございます。

引き続きよろしくお願いいたします！

@robjhon さん

お手数をおかけしました。試していただきありがとうございます。おかげさまで対処方法が明確になりました。

>> わいひらさん

必要な箇所全ての <input> に autocomplete="off" を付ければ問題は解決すると思います。ただ、どこが必要な箇所かは調べていません。ヘッダーモバイルメニューとフッターモバイルボタンあたりの <input> が変更の対象になるとは思います。

ブラウザバックで影響しそうなスライドインしてくる部分にautocomplete="off"属性を追加しておきました。
https://github.com/xserver-inc/cocoon/commit/de6be302960de17593709c579e3ef8d96b1adc77
最終的に以下の部分に追加しました。

・サイドバー
・メニュー
・検索
・シェアボタン
・フォローボタン

シェアボタンとかフォローボタンは大丈夫と思いますが一応追加しておきました。
※不具合関係は持っていないので動作確認はしていないです。間違ってたら申し訳ないです。