Search code examples
cssiphonewebipadmix-blend-mode

Mix Blend Mode is not working on iPhone and iPad browser


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.


Solution

  • I'd like to share my solution, hoping it might help others:

    To address the problem, I adjusted the img I intended to multiply so that it became a sibling element to the img I was multiplying with.

    As of December 2023, this appears to be the only effective method that works on iPhone's Google Chrome and Safari browsers.

    In essence transform the code from:

    <div class="main">
      <div class="container">
        <img style="mix-blend-mode: multiply;" src="./multiply.png" />
      </div>
      <img  src="./background.png" />
    </div>
    

    to

    <div class="main container">
      <img style="mix-blend-mode: multiply;" src="./multiply.png" />
      <img  src="./background.png" />
    </div>