⏳

Overflowが効かない訳 (EOTD No.12)

2020/12/23に公開

CSS

HTML

初心者

tech

こちらAmetaです! 12回目のEOTDです。
今日のエラーは解決できず終いだったので、ここに刻み込みます。

本日のエラー

シチュエーション

現在作成中のアプリ"Gravy"の実装中に起きた現在進行形のエラー。
投稿された料理の一覧を水平スクロールで確認することができるようにしようと試みました。

<ul class='dish-lists'>
  <% @dishes.each do |dish| %>
  <li class='list'>
    <%= link_to dish_path(dish.id) do %>
    <div class='dish-img-content'>
      <%= image_tag dish.image, class: "dish-img" %>
    </div>
    <div class='dish-info'>
      <div>
        <h3 class='dish-name'>
          <%= dish.name %>
	</h3>
        <div class='dish-price'>
          <span><%= dish.price %>円 / <%= dish.chef.name %>シェフ</span>
        </div>
      </div>
      <div class='heart-btn'>
      <%= image_tag "heart.png", :size =>'20x20', class:"heart-icon" %>
      <span class='heart-count'>0</span>
      </div>
    </div>
    <% end %>
  </li>
</ul>

ulとliにそれぞれクラスを与え、CSSでは以下のように記述。

ul.dish-lists {
  width: inherit;
  overflow-x: auto;
  white-space: nowrap;
}

li.list {
  display: inline-block;
  width: 30vh;
  padding: 1.5vw 1.5vw 0;
  background-color: white;
  border: 1px gray solid;
}

その結果がこちら。

はみ出した要素はoverflow: hidden;で隠されており、スクロールバーも表示されています。
しかし！スクロールをしようとしてもこの表示を動かすことができず右に見切れている料理の全体像を確認することができません。

考察

調べていく中でいくつかの原因が提案されていたのでそれらを試してみました。

横幅(width)を絶対値で指定していない。
Retinaディスプレイでは表示できない事がある。

1. 横幅(width)を絶対値で指定していない

ul.dish-lists {
  width: inherit;
  overflow-x: auto;
  white-space: nowrap;
}

li.list {
  display: inline-block;
  width: 30vh;
  padding: 1.5vw 1.5vw 0;
  background-color: white;
  border: 1px gray solid;
}

今回の横幅を絶対値で指定していないと言うのはul.dis-listsのwidthのことです。
ここを指定していないとスクロールが効かないという報告がいくつもありました。

ul.dish-lists {
  width: 1000px;
  overflow-x: auto;
  white-space: nowrap;
}

従ってwidthを1000pxに設定して再度試してみると。。

スクロールバーは表示されますが、やはりスクロールはできませんでした。

2. Retinaディスプレイでは表示できない事がある

調べている最中、一つ気になる記事を発見。

この方によると、スクロールできない人のPCはMacBook Pro、スクロールできる人のPCはMacBook Airであったという事。

そしてこの二種類のPCの異なる点の一つがディスプレイだったそうです。

このエラーを解決したコードがこちら。

transform: translateZ(0);

実際にこのコードをoverflowと同じブロックに含ませて動作を確認しましたが変化はありませんでした。

SOTD(Summary Of The Day)

本日は無念のタイムアウトとなりました。
ここまで解決のできないエラーは初めてで、かなり手強いと感じています。

もしかしたら他のCSS要素が水平スクロールの挙動を邪魔しているのではないかと思ったのでリファクタリングをしてみるのもいいのかなと思いました。今日の学びです。。