La página web no se muestra correctamente en los navegadores iOS o en el escritorio Safari

Tengo una página web simple. Solo un encabezado, una lista desordenada y una imagen de fondo.

La imagen de fondo se ve borrosa con 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 */ 

No tengo muchos dispositivos para probar, pero sé que se ve bien en: Chrome (MacOS), Firefox (MacOS) y Chrome (Android). Pedí prestado un iPhone de amigos para verlo, y la imagen de fondo no se muestra en absoluto.

En Safari de escritorio, la imagen se ve así:

safari de escritorio (Texto eliminado)

Esto es lo que se supone que debe ser la página: Esto es lo que se supone que debe ser.

Aquí está el html