I've got a simple webpage. Just a header, an unordered list, and a background image.
The background image is blurred with 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 */
I don't have a lot of devices to test on, but I know it looks fine in: Chrome (MacOS), Firefox (MacOS), and Chrome (Android). I borrowed a friends iPhone to look at it, and the background image does not render at all.
In desktop Safari the image looks like this:
(Text removed)
This is what the page is supposed to look like:
