css - 移动 Safari 上的 webkit 过滤器？

Question

在我看来，我记得在 Mobile Safari 中看到过 webkit-filters，但我遇到了麻烦。这个 CSS 代码在我的桌面浏览器中显示得很好，但在我的 iPhone 上却没有。有什么线索吗？我在 iOS v6 上。

我所做的只是通过 jQuery 添加/删除类。

.redtint {
  -webkit-filter: saturate(15) hue-rotate(330deg) brightness(110%);
  -moz-filter: saturate(5) hue-rotate(330deg) grayscale(110%);
}

当我在桌面上查看我的元素时，它会显示带有 webkit 设置的 redtint，但是当我在手机上查看它们（使用 Adobe Edge Inspect）时，redtint 是空白的。

score 0 · Accepted Answer

事实证明，Chrome 和 Mobile Safari 对亮度滤镜的解释有所不同。

我主要是在 Chrome 的桌面上进行测试。如果我使用 100% 作为基线值（亮度没有变化），其中 80% 更暗，120% 更亮，一切工作正常。

移动 Safari 使用 0% 的基线表示没有变化，-20% 更暗，20% 更亮。

我的 web 应用程序仅适用于 iPhone，因此我不必纠结于变通方法。

1 回答 1