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);を試して見てください。