网页在iOS浏览器或桌面Safari中无法正确呈现

Question

我有一个简单的网页。只是标题，无序列表和背景图像。

使用CSS模糊背景图片：

position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
-webkit-background-size: cover; /* Add in these */
-moz-background-size: cover;    /* four lines to */
-o-background-size: cover;      /* remove the white space*/
background-size: cover;         /* around images */
-webkit-filter: blur(5px) brightness(0.5);
-moz-filter: blur(5px) brightness(0.5);
-o-filter: blur(5px) brightness(0.5);
-ms-filter: blur(5px) brightness(0.5);
transform: scale(1.1); /* get rid of that ugly border */

我没有很多设备可供测试，但我知道它看起来不错：Chrome（MacOS），Firefox（MacOS）和Chrome（Android）。我借了一个朋友的iPhone来看它，背景图像根本没有呈现。

在桌面版Safari中，图片如下所示：

（删除了文字）

这是页面应该是这样的：

Here's the html