英文:
Inconsistent behaviour when using mix-blend-mode with overflow and
问题
我在Safari中遇到了一个奇怪的问题，似乎CSS属性mix-blend-mode会导致父元素（.numWrap）的overflow:hidden停止起作用。下面是我分离出来展示这个问题的一些CSS/HTML示例：
<!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>
在开发工具中禁用mix-blend-mode会恢复到预期的行为。这个问题在Chrome和Firefox中并不会出现（我进行了大部分的实际测试）。
英文:
I'm experiencing a strange result in Safari where it seems the CSS attribute mix-blend-mode seems to stop overlow:hidden of the parent (.numWrap) div from working. The example below is a snippet of the overall project, which is a flip-style timer app.
The use of mix-blend-mode is preferred as allows the shading to more naturally fall on the card below.
Behaviour in Safari (all devices)
See below some CSS/HTML I've isolated, exhibiting this behaviour.
<!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>
I've worked through all parts of the relevant CSS to identify the issue. Disabling the mix-blend-mode within DevTools returns to the expected behaviour. This is not an issue in Chrome or Firefox (where most of my live testing has occured).
答案1
得分: 0
如果有人遇到这个问题，我已经解决了。我认为这与WebKit奇怪地处理堆叠上下文有关（尽管我不太清楚这意味着什么）。
为了解决这个问题，我将 numWrap-shadow 从 numWrap div 中移出，并创建了一个新的容器 div 来容纳它们，将必要的属性转移过去。
如果有进一步的问题，我愿意尽力提供更多解答！
英文:
If anyone encounters this issue, I have solved it. I think it has something to do with WebKit handling stacking contexts oddly (though I'm not clear on what that means).
To solve this, I moved numWrap-shadow out of the numWrap div and created a new container div for both, transferring the necessary attributes.
If anyone has further questions, happy to expand where I can!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论