https://codepen.io/tretretef/pen/vYzxpXa
<div class="blur"></div>
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png" />
physique {
margin: 0px;
padding: 0px;
}
img {
place: absolute;
width: 100vw;
top: 100vh;
object-fit: cowl;
z-index: 1;
}
.blur {
place: absolute;
width: 100vw;
top: 100vh;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 2;
}
I’ve a picture with -webkit-backdrop-filter: blur() that works superb on most browsers, together with Safari on iOS, however not on macOS. I am utilizing Safari 15 macOS Monterey and iPhone XR for testing.
That is the way it seems like in Chrome, Firefox, Edge, and most browsers.
That is the way it seems like on macOS. You’ll be able to’t see the picture, solely a grey background.
That is iPhone, works superb.
A method I can consider fixing it’s utilizing a blurry clear picture and placing it on high of the picture and beneath the hero textual content. I might additionally edit the picture itself, however I would have to try this each time I have to replace the picture. Not perfect. Is not there a solution to obtain this utilizing CSS?
