Safari中mix-blend-mode导致父元素overflow:hidden失效问题求助

问题描述 #

开发翻页式计时器应用时遇到Safari专属渲染异常：为子元素.numWrap-shadow设置mix-blend-mode: multiply以实现阴影自然叠加效果后，父元素.numWrap的overflow:hidden属性完全失效，子元素的阴影超出父元素边界显示。该问题仅在全版本Safari中出现，Chrome、Firefox表现正常；禁用mix-blend-mode后，overflow:hidden立即恢复正常。

复现代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
    body {
        background-color: #aeccab;
    }

    .numWrap {
        font-size: 80pt;
        width: 500px;
        height: 500px;
        display: flex;
        border: 1px solid rgb(255, 0, 0);
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        position: relative;
        border-radius: 2rem;
        z-index: 25;
    }

    .numWrap-shadow {
        position: absolute;
        border-radius: 2rem;
        border: 1px solid rgb(67, 29, 204);
        mix-blend-mode: multiply;
        width: 100%;
        height: 100%;
        box-shadow: inset 18px 18px 36px #a1a1a1c8;
        z-index: 19;
    }

    .time,
    .time-alt {
        color: rgba(76, 85, 71, 0.876);
        border: 1px dashed rgb(230, 0, 255); 
        height: 100%;
        width: 100%;
        font-size: 300%;
        text-align: center;
        align-items: center;
        transition: linear;
        transition-duration: 200ms;
        transition-property: transform;
        overflow: hidden;
        position: absolute;
        display: flex;
        justify-content: center;
        transform: translateY(0%);
        will-change: transform;
        background-color: #dedede;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
    </style>
</head>
<body>
<div class="numWrap hoursWrap">
    <div class="numWrap-shadow"></div>
    <div class="time-alt time--hours inactive"><span>00</span></div>
    <div class="time time--hours"><span>00</span></div>
</div>
</body>
</html>

问题原因 #

这是Safari的已知渲染bug：当子元素设置mix-blend-mode时，会脱离父元素的裁剪上下文（clipping context），导致父元素的overflow:hidden无法对子元素进行边界裁剪。而Chrome和Firefox的渲染引擎正确处理了混合模式与裁剪上下文的关联。

解决方案 #

方案1：给父元素添加isolation: isolate #

通过给父元素.numWrap添加isolation: isolate属性，强制创建独立的堆叠上下文，让子元素的mix-blend-mode仅在父元素的上下文内生效，同时恢复overflow:hidden的裁剪功能。

修改后的.numWrap样式：

.numWrap {
    font-size: 80pt;
    width: 500px;
    height: 500px;
    display: flex;
    border: 1px solid rgb(255, 0, 0);
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 2rem;
    z-index: 25;
    isolation: isolate; /* 新增属性 */
}

方案2：将阴影效果迁移到父元素伪元素 #

如果不想依赖isolation属性，可以把.numWrap-shadow的样式转移到父元素的伪元素上，既保留混合模式效果，又不会触发裁剪失效问题：

1. 修改CSS：

.numWrap {
    /* 原有样式保留，确保position为relative */
    font-size: 80pt;
    width: 500px;
    height: 500px;
    display: flex;
    border: 1px solid rgb(255, 0, 0);
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 2rem;
    z-index: 25;
}
/* 新增伪元素样式 */
.numWrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    border: 1px solid rgb(67, 29, 204);
    mix-blend-mode: multiply;
    box-shadow: inset 18px 18px 36px #a1a1a1c8;
    z-index: 19;
    pointer-events: none; /* 避免遮挡下方元素交互 */
}

2. 移除HTML中的.numWrap-shadow元素：

<div class="numWrap hoursWrap">
    <div class="time-alt time--hours inactive"><span>00</span></div>
    <div class="time time--hours"><span>00</span></div>
</div>

验证结果 #

两种方案均能在Safari中正常保留阴影的混合叠加效果，同时让父元素的overflow:hidden生效；Chrome和Firefox的原有表现不受影响，完美兼容多浏览器。

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