Blend mode is not working on IOS browsers

I’m experiencing an issue with the CSS property mix-blend-mode: color; on iOS devices. It works correctly on Windows and Android, but it doesn’t seem to have any effect on iOS browsers. If anyone has a solution or a workaround, I’d appreciate it! Here’s the relevant code snippet:

 <div className="banner-main-container">
            <video
                muted
                loop
                autoPlay
                playsInline
                src={getImageUrl(
                    bannersList?.[0]?.attributes.video.data?.attributes?.url
                )}
            />

            <div className="overlay-with-opacity"></div>
            <div className="overlay-blend-mode"></div>
</div>
.overlay-blend-mode {
        @apply absolute top-0 left-0 w-full h-full;
         mix-blend-mode: color;
        background: #2c263f;
    }
 .overlay-with-opacity {
        @apply absolute top-0 left-0 w-full h-full opacity-80;
        background: #2c263f;
    }

I applied mix-blend-mode: color; to an overlay element, expecting it to blend the overlay color with the background content on all devices. This approach worked as expected on Windows and Android browsers, creating a color overlay effect. However, on iOS devices, it had no effect— the color blend didn’t apply, and the overlay simply displayed as a solid color.

I anticipated a consistent color blend effect across all platforms, but the lack of support on iOS led to a discrepancy in the design, where the expected overlay blending effect was missing entirely.

You need to sign in to view this answers

Related Post