Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした