I have an issue with a background image/blend. It won’t show on the Samsung S9 devices, but it works fine on other.
My CSS:
<style>
/*On the designer won't take effect. Only on live.*/
/* Fix issue Gavin and Micah had with Chrome on mobile */
.home-section-hero {
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-blend-mode: multiply;
}
/* Fix issue Panos had with IE and Edge */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.home-section-hero:after {
content: '';
background-image: linear-gradient(244deg,#0005d9,#ff0171);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 0;
}
}
/* Fix issue Panos had with IE and Edge */
@supports (-ms-ime-align: auto) {
.home-section-hero:after {
content: '';
background-image: linear-gradient(244deg,#0005d9,#ff0171);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 0;
}
}
</style>
Here is my site Read-Only: https://zenus-test-db5ecba40678492bfc478d4408c2.webflow.io/
(how to share your site Read-Only link)