iOS浏览器mix-blend-mode: color属性失效问题求助

在iOS Safari浏览器中，将mix-blend-mode: color应用于视频上方的覆盖层时，会出现仅显示纯色、无法实现颜色混合的问题——这是因为iOS Safari对视频元素的渲染层处理逻辑与其他浏览器不同，混合模式的计算需要依赖明确的底层渲染上下文。以下是几种可行的解决方案：

方案1：为父容器添加背景色并开启硬件加速 #

iOS Safari需要混合元素有明确的底层背景参考，同时开启硬件加速可以强制浏览器正确处理混合层级：

修改父容器的CSS样式：

.banner-main-container {
    @apply relative; /* 确保绝对定位元素的上下文 */
    background-color: #000; /* 添加纯色背景作为混合计算的参考 */
    transform: translateZ(0); /* 开启硬件加速，强制正确渲染混合层 */
}

可选优化：合并两个覆盖层，减少渲染层级（避免多层叠加导致的渲染冲突）：

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

.overlay-combined {
    @apply absolute top-0 left-0 w-full h-full;
    mix-blend-mode: color;
    background: rgba(44, 38, 63, 0.8); /* 合并原两个覆盖层的透明度与背景色 */
}

方案2：用CSS Filter模拟color混合效果 #

如果方案1无效，可以使用CSS filter属性模拟类似mix-blend-mode: color的视觉效果，iOS Safari对filter的支持更稳定：

.overlay-blend-mode {
    @apply absolute top-0 left-0 w-full h-full;
    background: #2c263f;
    opacity: 0.8;
    /* 调整参数匹配原color混合的视觉效果，可根据需求微调 */
    filter: invert(15%) sepia(20%) saturate(800%) hue-rotate(230deg);
}

方案3：Canvas绘制实现混合效果（复杂场景） #

如果上述方案都无法满足需求，可以通过JavaScript将视频帧绘制到Canvas，再在Canvas上应用颜色混合——这种方式兼容性最好，但需要额外的代码处理：

const video = document.querySelector('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const container = document.querySelector('.banner-main-container');

// 同步Canvas尺寸与容器
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;

// 用Canvas替换原视频元素
container.replaceChild(canvas, video);

// 逐帧绘制视频并应用混合效果
function renderFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'color';
    ctx.fillStyle = '#2c263f';
    ctx.globalAlpha = 0.8;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(renderFrame);
}

video.addEventListener('play', renderFrame);

内容的提问来源于stack exchange，提问作者Ali Raza