Css chrome mobile上未显示背景图像

我正在编写网页并学习flexbox。我找到了一个很好的设计，桌面上的一切都很完美（当窗口调整大小时，一切都很完美）。这些元素在手机和平板电脑上也可以很好地调整大小

我唯一的问题是，除了chrome for mobile（android）和safari，主大Div的背景图像在任何地方都可以完美地调整大小，而safari甚至没有在纵向模式下显示，而是在横向模式下放大。不过，它在firefox应用程序（android）上仍能正常工作

以下是网址：

下面是所有代码的Github分支：

下面是专门处理页面这一部分的代码： Html

---

谢谢你的帮助

一些解释可能会有帮助。他的代码使用特定于供应商的前缀-

xxx {
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height:100%;
 min-height:100%;
}

background-image: url(../images/start-box.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;

xxx {
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height:100%;
 min-height:100%;
}