Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
67
Help us understand the problem. What is going on with this article?
@morikooooo

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

67
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
67
Help us understand the problem. What is going on with this article?