Edited at

overflow-y: scroll; が効かないディスプレイがある。それはretinaディスプレイ。 


overflow-y: scroll;が効かない・・・

ある日いつものように開発していると、「ここ、スクロールできないんだけど」という指摘を頂いた。

それはよくある「高さを固定して、はみ出したテキストはスクロールさせる」というもの。

heightを指定した要素にoverflow-y: scroll;を指定する、一般的な実装だと思います。


sample.html

  <div class="textBlock">

ここにテキストが入ります。
<br />長いテキストが入るとスクロールバーが出てY方向にだけスクロールします。
<br />短いテキストの場合はスクロールさせません。
</div>


before.css

  .textBlock{

box-sizing: border-box;
overflow-y: scroll;
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #aab4b9;
background: #fafafa;
font-size: 16px;
}

上記のソースで私の環境では問題なくスクロールできました。

他の人にも見てもらったところ、どうやらスクロールできる人とできない人がいるようです。

スクロールできない人のPCはMacBook Pro。スクロールできる人のPCはMacBook Air

さらにMacBook Proを使っている人に外部ディスプレイでスクロールを試してもらったところ、問題なくスクロールできたのです。

つまり、Retinaディスプレイだけでスクロールできないということです。(※MacBook ProはRetinaディスプレイ。)

つまり、どういうことだってばよ・・・(´・ω・`)


解決策

overflow-y: scroll;してるブロックにtransform: translateZ(0); を指定したらRetinaディスプレイでも無事スクロールできるようになりました。


after.css

  .textBlock{

box-sizing: border-box;
overflow-y: scroll;
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #aab4b9;
background: #fafafa;
font-size: 16px;
transform: translateZ(0); /* ← NEW! */
}


結局何だったのか

結局何だったのか、実はわかっていません。

詳しい検証もしてなかったので、他のスタイルが悪さをしていた可能性も否めないのです・・・。

不思議なのは、ディスプレイを移動させると同じブラウザでもスクロールできるようになるということ。

もちろん再読み込みなどもしていません。

もし特定の人だけスクロールできないという状況に遭遇したらtransform: translateZ(0);を試して見てください。