混合混合模式在移动Chrome和Firefox

Question

我正在运行Android 10和Chrome Beta 84.0.4147.89

但是混合混合模式在Chrome和FF中的渲染似乎非常不同。聊天窗口的背景应该是白色的。相反，它是五颜六色的。

1. 所以我的问题是，如何在手机
2. 同样在桌面版的Chrome中，只要html变成可滚动的

我真的很困惑，不知道发生了什么，以及可以应用哪个修复程序来修复其中的至少一部分。

https://jsfiddle.net/f7xbnozt

.chat-container {
position: absolute;
width: 300px;
border: 2px solid black;
border-radius: 8px;
overflow: hidden;
}
.chat {
float: left;
width: 280px;
height: 300px;
padding: 10px 20px;
overflow: auto;
}
.chat-container:after {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(rgb(0, 95, 255) 0%, rgb(146, 0, 255) 50%, rgb(255, 46, 25) 100%);
content: '';
mix-blend-mode: screen;
pointer-events: none;
}
.chat div {
color: white;
background: #1e1e1e;
border-radius: 8px;
padding: 10px 12px;
}
.chat .q {
background: blue;
margin: 6px 0 6px 50px;
}
.chat .a {
background: green;
margin: 6px 50px 6px 0;
}

<div class="chat-container">
<div class="chat">
<div class="q">Chat message...</div>
<div class="q">Chat message...</div>
<div class="a">Chat message...</div>
</div>
</div>

Answer 1

什么都不起作用的原因是算法。

透明背景+蓝色和绿色+渐变背景等于你在铬中看到的生动效果。

而白色背景+蓝色和绿色+渐变背景等于所需结果。

.chat-container {
background-color: #ffffff;
...
}

奇怪的是，如果您将原始代码从jsfiddle复制到codepen，那么在那里也不会有任何工作，即使在firefox中也是如此。