実現したいこと・問題点

Mac版Safariにて、縦横幅の固定されたdivに対して
overflow: auto; のstyleを指定しており、
div内では縦スクロールが必要なテキストがあります。
(以下にソースあり)

通常遷移では問題なくdiv内のテキストはスクロールできるのですが、
一度別ページに遷移し、ブラウザバックで戻ってくると
div内のテキストがスクロールできなくなってしまいます。

ブラウザバックしても通常遷移同様にスクロールできるようにしたい。

HTMLやCSSの指定に致命的な間違いがあるのか、
そもそもブラウザのバグなのか、ご助言頂きたく思います。

ソース

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>Test</title>
6</head>
7<body>
8<style>
9.sample {
10  width:200px;
11  height:200px;
12  background-color: #aaa;
13  overflow: auto;
14}
15</style>
16<a href="foo.html">別ページ</a>
17<div class="sample" >
18<p>ああああああああ</p>
19<p>ああああああああ</p>
20<p>ああああああああ</p>
21<p>ああああああああ</p>
22<p>ああああああああ</p>
23<p>ああああああああ</p>
24<p>ああああああああ</p>
25(省略)
26</div>
27</body>
28<html>

試したこと

overflow: auto; をoverflow-x,overflow-yに変更。
autoをscrollに変更。
は試しましたが、変化はありませんでした。

現在この不具合が確認できているのはMacのサファリのみで
ChromeやFirefox等は(Windowsも含む)再現しませんでした。

補足情報

OS: OS X El Capitan
Browser: Safari 9.1.1

行動規範の内容に同意します

回答1件

ベストアンサー

私自身、Safari 9を使っていた頃に、ブラウザで次のページから戻った時にスクロールできなくなるサイトをいくつか見てきて困ったことがあります。

同じ現象かどうかまできっちり検証したわけではないですが、Stack Overflowにもよく似た質問が色々と出ているようです。(しかも、戻ってきた時にリロード、といった解決策が出ている始末で...)
Overflow y scroll not working when going back to the page in Safari 9
Apple devices browser no scrolling after using back-button

私の手元だと、Safari 10になってから同じ現象に遭わなくなりましたので、他のブラウザでも見ない現象ですので、恐らくはSafari 9固有の現象なのではと考えています...

投稿2017/08/25 00:52