嘿，我刚好碰到过类似的情况，这个问题其实是iPhone X这类刘海屏设备的安全区域搞的鬼！

问题根源 #

iPhone X的横屏模式下，浏览器默认会给刘海和底部Home Indicator预留安全区域，而你用的background-size: cover配合fixed定位，在iOS的WebKit内核里会按照不包含安全区域的视口计算尺寸，所以就出现了留白。而且这个问题只会在异形屏设备上触发，难怪iPhone 7这类传统矩形屏幕完全正常，电脑端和竖屏模式也没毛病。

快速解决方法 #

方法一：修改视口设置（推荐）

直接在你的viewport meta标签里加上viewport-fit=cover，让页面内容覆盖整个屏幕的所有区域，包括安全区：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

方法二：调整CSS样式

如果不想改动视口设置，也可以通过CSS强制让背景图覆盖整个视口：

/* 先确保html和body都占满整个屏幕高度 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

html {
  background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  /* 加上webkit前缀确保iOS Safari兼容性 */
  -webkit-background-size: cover;
}

验证提示 #

修改后你再去iPhone X的Chrome和Safari横屏模式下测试，背景图应该就能铺满整个视口了，其他场景的显示也不会受影响。

内容的提问来源于stack exchange，提问作者Tim Wickstrom