android - 将 mix-blend-mode 设置为除 "normal"以外的任何值都会在 Android 9 的 Chrome 中隐藏元素

Question

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

• Chrome
• Cordova 中的 Webview(在这种情况下可能还有 Chrome)

它适用于:

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

我最初遇到了一个 SVG 元素的问题，但我也能够用一些简单的 div 重现它。

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

我尝试运行下面的示例并在运行 Android 8 的 Nexus 5 上获得预期结果(左)，但它在运行 Android 9 的 OnePlus 6 手机上失败(右)(see image)。我有其他用户(我的一款游戏使用 mix-blend-mode)在运行 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 像素，或视口(viewport)高度的大约 200%(难以测试)。

不幸的是，这种切断内容的行为非常一致......我之前提到的 Pixel 2 用户无法重现最初的混合模式问题，是在解决方法后看到这种切断被应用。

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

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

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

祝你好运!