mix-blend-mode is not working in phone browser

Question

I used mix-blend-mode css property in my code. It is working on chrome desktop browser but not working on my phone chrome browser. I have used mix-blend-mode: screen; property for div fire1,fire2,fire3 images. What am I doing wrong? Please Help ! Thank you! [tag:mix-blend-mode:screen]

I have tried this:



        body {
            background: url("https://i.postimg.cc/RF34x0dJ/Pngtree-red-glitter-pattern-indian-diwali-1447745.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .fire1 img {
            position: absolute;
            mix-blend-mode: screen;
            top: 10px; 
            height: 200px;
            width: 200px;

        }
        .fire2 img {
            position: absolute;
            top: 10px;
            mix-blend-mode: screen;
            height: 200px;
            width: 200px;

        }
        .fire3 img {    
            position: absolute;
            top: 155px;
            mix-blend-mode: lighten;
            height: 368px;
            width: 368px;
        }

        

        .fire1 {
            display: flex;
            justify-content: right;

        }

        .fire2 {
            
            display: flex;
            justify-content: left;

        }

        .fire3 {
            display: flex;
            justify-content: center;

        }

        <div class="fire1">
            <img src="https://ik.imagekit.io/souravkumar8409/bluefirework1.gif?ik-sdk-version=javascript-1.4.3&updatedAt=1672739568223"
                alt="fire">
        </div>

        <div class="fire2">
            <img src="https://ik.imagekit.io/souravkumar8409/bluefirework1.gif?ik-sdk-version=javascript-1.4.3&updatedAt=1672739568223"
                alt="fire">
        </div>

        <div class="fire3">
            <img style="mix-blend-mode: screen;" src="https://ik.imagekit.io/souravkumar8409/fireworkbig.gif?ik-sdk-version=javascript-1.4.3&updatedAt=1672739568765"
                alt="fire">
        </div>

Phone:-Realme C11, Android 11. Even if I "inspect" this code in window brave browser and toggle it to phone size the property is not working. — Sourav Kumar, Jan 04 '23 at 17:57
This is my complete code :- https://github.com/Sourav-8401/funforbrother/blob/main/diwali.html — Sourav Kumar, Jan 04 '23 at 18:15
Sorry I don't have access at the moment to an Android device - and you say it all works OK on Chrome desktop. — A Haworth, Jan 04 '23 at 18:20
Yes it works well in chrome desktop but when I inspect it to phone screen size its does'nt work. — Sourav Kumar, Jan 04 '23 at 18:35

Stefanie Knoblach · Answer 1 · 2023-05-13T13:12:59.370

I had the very same issue and it seems that the problem has to do with the body element holding the background you want to use the mix-blend-mode on to.

I would suggest you to try this:

Remove all background elements from body
create new background class :

.bg {
    position: fixed;
    /*define the size and position you need*/
    width: 100vw;
    height: 100vh;
    background: url("https://i.postimg.cc/RF34x0dJ/Pngtree-red-glitter-pattern-indian-diwali-1447745.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
}

<body>
    <div class="bg"></div>
    <div class="fire1">
        <img src="yourImage.jpg" />
    </div>

    <!-- OR -->

    <div class="bg">
        <div class="fire1">
            <img src="yourImage.jpg" />
        </div>
    </div>
</body>

If needed you can place .fire as well inside the .bg, I tested both, and both ways work.

score 0 · Answer 2 · answered Jan 03 '23 at 14:51

0

make sure you're using a compatibility brownser on phone

https://caniuse.com/?search=mix-blend-mode

Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes.

answered Jan 03 '23 at 14:51

fabiovaz

516
2
9

mix-blend-mode is not working in phone browser

2 Answers2

I would suggest you to try this: