CSS background-blend-mode をどこでも適切に劣化させる方法で使用すると、イライラする問題が発生します。具体的には、iOS 上の Safari と Chrome は、サポートをテストする私の努力を回避しているようです。
この記事の執筆時点では、background-blend-mode (少なくとも基本的な形式) は、IE を除くほとんどのブラウザーの最新バージョンでサポートされています ( http://caniuse.com/#feat=css-backgroundblendmodeを参照)。次のように、単色の背景色とグレースケール テクスチャをブレンドするために使用しています。
.banner-inner {
background-image: url("../img/banner-bg-texture.png");
background-color: #7692b4;
background-blend-mode: overlay;
}
background-blend-mode は劣化するように設計されているため、ブラウザーでサポートされていない場合、そのブラウザーには通常の背景画像が表示されます。ただし、次のように、サポートされていないブラウザーを明確にターゲットにして、無地の色のみが表示されるようにしたいと思います。
.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);
これは、適切な .no-background-blend-mode クラスを取得する IE をターゲットにする場合にうまく機能します。デスクトップ上の Chrome、Firefox、および Safari はすべて、問題なくブレンドモードをサポートしています。
問題は次のとおりです。iOS 8.3 で Safari と Chrome の両方を調べていますが、どちらもテストに合格( typeof supportsBackgroundBlendMode「通常」を返します) していますが、ブレンド モードの実装に失敗しています。(両方とも、ブレンドではなく、グレースケールの背景画像のみを示しています)。
ここで何が起こっているのかを理解するのを手伝ってくれる人、および/または実際に機能するこの機能のためにこれらのブラウザをテストしてターゲットにする方法を見つけるのを手伝ってくれる人はいますか? ありがとうございました！
更新: iOS 8.4.1 (この編集時点で最新のもの) にまで続くこの問題の適切な解決策はまだ見つかっていません。