Question

我在使用CSS后台混合模式方面遇到了令人沮丧的问题，这种方式可以在任何地方优雅地降级;具体来说，iOS上的Safari和Chrome似乎逃避了我们测试它们以获得支持的努力。

在撰写本文时，除IE之外的大多数浏览器的最新版本都支持后台混合模式（至少以基本形式）（请参阅：http://caniuse.com/#feat=css-backgroundblendmode）。我用它来将纯色背景颜色与灰度纹理混合，如下所示：

.banner-inner {
    background-image: url("../img/banner-bg-texture.png");
    background-color: #7692b4;
    background-blend-mode: overlay;
}

后台混合模式旨在降级，以便在浏览器中不支持该浏览器时，该浏览器只能看到正常的背景图像。但是，我想专门针对那些不支持的浏览器，以便他们只看到纯色，如下所示：

.no-background-blend-mode .banner-inner {
    background: #7692b4; // If no blend-mode support, fall back to solid color
}

CSS Tricks和其他人建议使用基于JavaScript的测试来支持这个属性，我会这样使用：

// Test for background-blend-mode support
    ;(function(window) {

        document.addEventListener("DOMContentLoaded", function() {
            var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;

            if(typeof supportsBackgroundBlendMode === "undefined") {  
                document.documentElement.className += " no-background-blend-mode";
            }
        }, false);

    })(window);

这适用于定位IE，它可以获得正确的.no-background-blend-mode类。桌面上的Chrome，Firefox和Safari都支持混合模式。

以下是问题所在：我在iOS 8.3上查看Safari和Chrome，并且 都通过了测试 < / strong>（typeof supportsBackgroundBlendMode返回＆＃34;正常＆＃34;）但 无法实现混合模式。 （它们都显示灰度背景图像单独，而不是混合）。

任何人都可以帮助我了解这里发生了什么，和/或帮助我找到一种方法来测试＆amp;针对此功能定位这些浏览器，实际上有效吗？谢谢！

更新：仍未找到解决此问题的良好解决方案，该问题一直存在于iOS 8.4.1中（截至此编辑时最新）。

测试正确定位iOS Safari和Chrome的后台混合模式支持？

0 个答案: