Background-blend-mode not working on mobile

Question

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.

Please post your css and html. It will make it easier to understand what might be going wrong. Thanks! — Gene Z. Ragan, Oct 08 '19 at 04:29
Thanks for letting me know! I just added the relevant CSS, as well as a snippet for added information. — DarkRunner, Oct 08 '19 at 04:58

score 0 · Answer 1 · answered Oct 08 '19 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?

score 0 · Answer 2 · answered Oct 08 '19 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;
}

OR

<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):

2 Answers2