android - 将 mix-blend-mode 设置为“正常”以外的任何内容都会在 Android 9 上的 Chrome 中隐藏元素

Question

CSS 的 mix-blend-mode 在 Android 9 上似乎失败了：

• 铬合金
• Cordova 中的 Webview（在这种情况下也可能是 Chrome）

它适用于：

• Android 8 上的 Chrome
• Android 9 上的火狐

我最初遇到了 SVG 元素的问题，但我也可以使用一些简单的 div 来重现它。

一个非常简单的代码示例： https ://codepen.io/walmink/pen/YoJRqa

我尝试运行下面的示例并在运行 Android 8（左）的 Nexus 5 上获得预期结果，但在运行 Android 9（右）的 OnePlus 6 手机上失败（见图）。我有其他用户（我的一个使用混合模式的游戏）在运行 Android 9 的 OnePlus 7 和 Google Pixel 3a XL 上报告了同样的问题。

它似乎在我尝试过的任何桌面浏览器上都可以正常工作。在 Safari 上，除非您添加 ，否则它也会与背景混合isolation: isolate，但至少混合仍然会发生。

Answer 1

感谢您跟踪 Chrome 问题！我整天都在调试这个，但错过了那个。我在使用 OnePlus 6t。其他人无法在 Pixel 2 上重现，但很高兴听到它实际上正在其他设备上发生。

我有一个解决方法，我很快也会在那个 Chromium 线程中解决这个问题。

• 选项 1：在混合元素上强制硬件加速，使用类似的东西transform: translate3d(0,0,0);

• 选项 2：在混合元素上，添加一个will-change属性，设置为几乎任何东西。will-change: opacity;例如，就足够了。这种强制重新绘制似乎足以让混合模式重新启动。

现在，这解决了问题......但会导致另一个问题。如果您必须滚动超过大约一页长度，则混合元素最终将被切断，并且对于页面的其余部分将保持不可见。

此处描述了此行为（或类似行为）：

• https://bugs.chromium.org/p/chromium/issues/detail?id=798148 这听起来几乎相同，但被标记为已修复。

• https://bugs.chromium.org/p/chromium/issues/detail?id=992398这听起来也很相似，但它们已确定与层的最大大小有关，该层相当大（大约 8000 像素） ）。而使用此解决方法您会发现的行为更像是 2000 像素，或者大约是视口高度的 200%（难以测试）。

不幸的是，这种截断的内容行为非常一致......我之前提到的那个 Pixel 2 用户无法重现最初的混合模式问题，一旦应用了变通方法，就会看到这种截断。

您说您正在制作游戏，所以希望不会涉及太多滚动？

此外，对于它的价值，您可能会发现屏幕混合模式不受所有这些影响，并且在没有任何变通方法的情况下仍然可以工作。

您可以使用此https://codepen.io/chasebank/pen/wvwWGxd.box进行测试 解决方法已在元素 中注释掉。

祝你好运！