使用 mix-blend-mode 和 overflow 时的不一致行为

Question

我在 Safari 中遇到一个奇怪的结果，似乎 CSS 属性

mix-blend-mode

似乎停止了父 (

overlow:hidden

) div 的

.numWrap

工作。下面的示例是整个项目的一个片段，它是一个翻转式计时器应用程序。

使用

mix-blend-mode

是首选，因为它可以让阴影更自然地落在下面的卡片上。

请参阅下面我隔离的一些 CSS/HTML，展示了这种行为。（请原谅我的混乱，我还处于学习 CSS/javascript 的早期阶段！）


<!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;
        /*top: 0;
        bottom: 0;
        border-radius: 2rem;
        /*background: linear-gradient(to right bottom,
                rgba(226, 219, 205, 0.753),
                rgba(255, 255, 255, 0.1));*/
        /*left: 0;
        backface-visibility: hidden;
        right: 0;*/
        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>

我已经研究了相关 CSS 的所有部分来确定问题。在 DevTools 中禁用

mix-blend-mode

返回到预期的行为。这在 Chrome 或 Firefox 中不是问题（我的大部分实时测试都发生在 Chrome 或 Firefox 中）。

虽然我的诊断可能是错误的，所以请任何想法将不胜感激！

谢谢，

-弥敦道

Answer 1

如果有人遇到这个问题，我已经解决了。我认为这与 WebKit 奇怪地处理堆栈上下文有关（尽管我不清楚这意味着什么）。

为了解决这个问题，我将

numWrap-shadow

移出了

numWrap

div 并为两者创建了一个新的容器 div，传递了必要的属性。

如果有人有进一步的问题，很乐意在我力所能及的范围内展开！

使用 mix-blend-mode 和 overflow 时的不一致行为

问题描述投票：0回答：1

1个回答

最新问题

使用 mix-blend-mode 和 overflow 时的不一致行为

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1