0

I am working on a website project. I put the image and set mix-blend-mode: screen. It works well on all browsers except iPhone and iPad browser. Please let me know solution. Thanks & Regards.

I am not sure why this happen in only iPhone and iPad web browser.

Lee
  • 1
  • 1
  • We can’t really help without seeing the relevant code. Please read https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Oct 28 '22 at 08:06

1 Answers1

0

Same thing here. "Mix-blend-mode: multiply" is working on computer browsers (everyone I tested), Samsung browser and Android Chrome but not in iPad/iPhone Safari or Chrome. I paste my code here but I think it's not about the code itself but Apple OS issue with this property.

<div id="container">
  <div id="content">
    <!-- Card content -->
  </div>
  <div id="red-background"></div> <!-- empty div for transparent effect -->
</div>



#red-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url(../imgs/fondo-rojo.jpg);
  background-repeat: repeat;
  background-color: #ffffff;
  // background-color: #F40009;
  mix-blend-mode: multiply;
  // background-blend-mode: multiply;
  border-radius: 50px;
}

I tried both properties: "background-color" and "background" with a red little jpg but none of them have worked. Same thing with "mix-blend-mode" and "background-blend-mode".

Pablo C
  • 1
  • In case it can help anyone: I fixed it after so much try-and-error. I moved the layer which has the image to the div that contains the multiplied element. Now it makes sense to me, but I still don't understand why it works everywhere but iPhone or iPad. – Pablo C Nov 10 '22 at 11:34