Background-blend-mode not working on mobile

905 Views Asked by DarkRunner At 08 October 2019 at 04:00

I used background-blend-mode: lighten; to essentially lighten the intensity of the black background image (refath.github.io/Survey). While it works perfectly on Desktop, I checked the site on my phone, and for some reason, the black background simply overrides the background-blend-mode, if that makes sense. I even tried using !important to override any libraries that may be interfering with the design, but to no avail. Here's the relevant code:

CSS:

body{
 padding: 20px;
 margin: 0;
 background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
 background-color: rgba(255, 255, 255, 0.95);
  background-blend-mode: lighten !important;
  max-width: 100%;
 overflow-x: hidden;
}

<body>

</body>

On Desktop (Chrome):

On iPhone X (Chrome):

Any help would be greatly appreciated. Thanks.

Original Q&A

There are 2 best solutions below

Tanner Mann On 08 October 2019 at 05:11

I don't see Chrome for iOS on caniuse's list, but browser support for that css rule is still spotty. It could be that there simply isn't support for it yet. Since Edge doesn't support it, it's typically good to have a backup plan for when it fails. Have you tried other browsers on iOS?

Awais On 08 October 2019 at 06:30

Why not using overlay of color on a body

body{
    padding: 20px;
    margin: 0;
    background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}


body:before{
    content: '';
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95); /* Your desire color */
    z-index: 2;
}

<div id="overlay"></div>//place inside body tag

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Your desire color */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

Background-blend-mode not working on mobile

On Desktop (Chrome):

On iPhone X (Chrome):

There are 2 best solutions below

Related Questions in CSS

Related Questions in BACKGROUND-IMAGE

Related Questions in BACKGROUND-BLEND-MODE

Trending Questions

Popular # Hahtags

Popular Questions