Josh Hsu

Posts

height: fit-content 在 iOS 上無法正常運作

> height: fit-content 在 iOS 上無法正常運作

前情提要

最近在線上環境回報了一個 Bug，說是在手機裝置上看不到列表，然後在 Mac 上測試，發現列表可以正常顯示啊，然後因為這個料表的資料是從 API 取得，所以我就想說那我來測試看看是不是 API 的問題。

後來花了一個小時的排查後發現是 css 的問題，結果在 IOS 手機裝置上，height: fit-content 無法正常運作，導致彈窗無法正常顯示，在其他瀏覽器上、及 Android 上則不會有此問題。

問題重現

實際效果

正常情況

正常情況

在 Iphone 上看的話會是這樣

在 Iphone 上看的話會是這樣

Code Example

<section
  aria-label="dialog"
  className="fixed top-0 left-0 bottom-0 right-0 w-full h-full z-50"
  {/* 假如最外層彈窗是浮動(position: fixed、absolute)的話就會有此問題 */}
>
  <div
    aria-label="dialog-overlay"
    className="absolute top-0 left-0 bottom-0 right-0 bg-black/50"
  />
  <div className="h-fit w-[300px] bg-blue-200 absolute top-0 left-0 bottom-0 right-0 m-auto">
    {/* 這裡設定 height: fit-content */}
    <header className="bg-blue-500 text-center py-3">Header</header>
    <main
      aria-label="dialog-body"
      className=" h-[100%] flex flex-col gap-4 mx-auto my-5 w-fit overflow-hidden"
    >
      {/* 這裡設定 height: 100%，高度設定為百分比的話，
          在 IOS iPhone 上會導致彈窗無法正常顯示，
          在其他瀏覽器上、及 Android 上則不會有此問題 */}
      <CardItem />
      <CardItem />
      <CardItem />
    </main>
  </div>
</section>

解決思路

  1. 首先我先在 Can I use 上查詢，發現支援度也沒什麼問題。
  2. 專案在 CSS 中，最外層元素為 position: fixed 或 position: absolute 時，外層元素設為 height: fit-content，內層元素則設為 height: 100%。於 iOS 手機裝置(包含 Safari 與 Chrome)瀏覽時，發現內層高 度異常，無法填滿父層，或呈現為 0。
  3. 查了一下 MDN文檔，發現 position: absolute 的元素會脫離文檔流，不會影響其他元素的布局。

MDN - position

  1. 所以我就想說那我來測試看看是不是 position: absolute 的元素會脫離文檔流，導致內層元素無法填滿父層。
  2. 結果發現確實有問題。
// 已上省略其他程式碼
<main
  aria-label="dialog-body"
  className=" h-fit flex flex-col gap-4 mx-auto my-5 w-fit overflow-hidden"
>
  {/* 這裡設定 height: fit-content */}
  <CardItem />
  <CardItem />
  <CardItem />
</main>
// 已下省略其他程式碼

最後實際為什麼會照成這樣我也不清楚，但最後我們的解決方法就是將 height: 100% 改為 height: fit-content，這樣就可以正常顯示了。先記錄下來，有機會再來研究一下。

Reference

See all posts