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.
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>