时间戳

首页 > 解决方案 > CSS背景混合模式在带有视口元标记的chrome移动设备中不起作用

css - CSS背景混合模式在带有视口元标记的chrome移动设备中不起作用

问题描述

大多数混合模式在 chrome mobile 中不起作用 - 我已经能够让“屏幕”和“叠加”工作，但不是像乘法、变暗、排除等那样。有谁知道这是否与s9的gpu架构在这里不兼容？

代码笔

这是一个带有屏幕截图的简单示例：

<style>
.blended-gradient{
  background-blend-mode:exclusion, normal;
  background:linear-gradient(black 0, white 50%,  black 100%),
    radial-gradient(black 0, white 70%, black 70.1%);  
  height:200px;
  width:200px;
}
</style>
<div class="blended-gradient"></div>

在 chrome 桌面上，我看到一个漂亮的金属色球：

铬桌面

在 chrome android 中，我看到失败：

失败

很想知道这是否是一个已知问题，或者是否有任何解决方法。请注意，我在纯 chrome 环境中，所以我目前不太关心其他浏览器。

更新 1

看来这可能是三星 s9 的问题，因为自 2019 年 4 月以来，其他人在 s9s 上偶尔看到此问题。我只在我的个人 s9 上进行了测试。请求站点的桌面版本可以解决问题，但这对最终用户没有帮助。CSS 背景混合模式不适用于三星 S9

更新 2

删除 meta name=viewport 标记可以解决问题，并且一切正常。这显然不是一个可行的解决方法，所以我希望 chrome 开发人员能看到这一点。将发布一个错误。

标签： cssgoogle-chromebackground-blend-mode

解决方案

推荐阅读