2019年4月27日 星期六

[CSS] 手機版chrome背景圖(backgroun-size: cover)無法正常顯示

在html上使用background-image與background-size為cover設計全背景:


桌機上測試正常,但使用Android手機上Chrome直向瀏覽時,背景圖無法延伸至底部,
如下圖:



橫向瀏覽則正常,測試了一下,發現:
● background-size: cover:背景圖在mobile chrome就無法延伸至底部。
● background-attachment: fixed:在mobile chrome沒有生效。

google了一下,發現這似乎是mobile chrome的bug??
但直到目前,該問題依然存在,
常用的workaround是指定html的height為100%,如下圖:


測試結果如下圖:




參考資料:
https://support.google.com/chrome/forum/AAAAP1KN0B0l6BF3W0rymo/?hl=en&gpf=%23!topic%2Fchrome%2Fl6BF3W0rymo
https://issuetracker.google.com/issues/36908439
https://bugs.chromium.org/p/chromium/issues/detail?id=344338
https://css-tricks.com/perfect-full-page-background-image/