iOSでbackground-blend-modeがうまく効かないので、mix-blend-modeに変更したら上手くいった

これは何

SVGを使ってノイズの背景を作る際にbackground-blend-modeを使っていたらiOSで表示が崩れてしまったので、mix-blend-modeにしたらうまく行ったよというメモです。

要点

要点はこんな感じです。

1. SVGで生成したノイズの色味調整にCSSのbackground-blend-modeを使用していた
2. iOSで検証してみたら色味調整がうまくいかず、ノイズがカラフルになっていた
3. 調べてみると、iOSではbackground-blend-modeとbackground-repeat: repeatを一緒に使うと効かなくなるらしい..
   • Ref ios - CSS: A background-blend-mode fallback for iPhone Safari - Stack Overflow
4. -> 色味の調整をmix-blend-modeに変更したら上手くいきました

最終的に作ったSVG

<svg height="200" viewBox="0 0 200 200" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="noise">
    <feTurbulence
      baseFrequency="0.3"
      numOctaves="3"
      stitchTiles="stitch"
      type="fractalNoise"
    />
  </filter>
  <g>
    <rect fill="#EDEEEE" height="100%" width="100%"/>
    <rect style="mix-blend-mode: overlay;" filter="url(#noise)" height="100%" width="100%"/>
    <rect style="mix-blend-mode: color;" fill="#EDEEEE" height="100%" width="100%"/>
  </g>
</svg>

解説

【前提】SVGでノイズを作る

まず、SVGでfeTurbulenceを使って簡単にノイズを生成することができます。

See the Pen Noise by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.

これを活用して、よく見る「ざらっとしたテクスチャ」を表現しようとしました。

もちろんこのままの色が混ざった状態では使えないので、ここから色味を調整していきます。

background-blend-modeで色味を調整してみる

Figmaで色々試してみたところ、「①グレーの下地のレイヤー」の上にoverlayで「②ノイズのレイヤー」を重ね、さらにcolorで「③グレーの色調整レイヤー」を重ねるとイメージ通りのテクスチャになることがわかりました。

早速これをCSSで再現してみます。
大体以下の手順です

1. HTMLで適当なコンテナとdivを用意する
2. コンテナに背景色を指定する
3. divをコンテナいっぱいに広げ、backgroundにノイズのSVGと背景色と同じ色を指定する
4. さらにdivにbackground-blend-mode: overlay, color;を指定し、色味を調整する

<section>
  <div class="inner"></div> <!--  ノイズ用のdiv  -->
</section>

section {
  background-color: #EDEEEE;
}

.inner {
  background-blend-mode: overlay, color;
  background:
    url(#{image_url('../image/noise.svg')}),
    linear-gradient(#EDEEEE, #EDEEEE);
  }

この方法でも上手くいっているかのように見えたのですが、iOSで実機検証してみるとbackground-blend-modeが効いていませんでした..

調べてみると、iOSではbackground-blend-modeとbackground-repeat: repeatを一緒に使うと効かなくなるらしいです

色味の調整をmix-blend-modeに変更する

ノイズを背景に敷き詰めたい関係上、background-repeat: repeatを外すことはできなかったので、background-blend-modeを使わないで実現する方法を考えました。

結論、mix-blend-modeを使うとよりシンプルにかける&iOSでも崩れなかったのでこちらにしました。
作成したSVGはこんな感じです。

SVG内にrectを3つ作成し、それぞれを「背景」「ノイズ」「色味調整」にしています

まず背景のrectにベースとなる色を指定し、その上にノイズをmix-blend-mode: overlayで乗せます。
さらに色味調整用のrectに色を指定してmix-blend-mode: colorで乗せています。

<svg height="200" viewBox="0 0 200 200" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="noise">
    <feTurbulence
      baseFrequency="0.3"
      numOctaves="3"
      stitchTiles="stitch"
      type="fractalNoise"
    />
  </filter>
  <g>
    <rect fill="#EDEEEE" height="100%" width="100%"/> <!-- 背景 -->
    <rect style="mix-blend-mode: overlay;" filter="url(#noise)" height="100%" width="100%"/> <!-- ノイズ -->
    <rect style="mix-blend-mode: color;" fill="#EDEEEE" height="100%" width="100%"/> <!-- 色味調整 -->
  </g>
</svg>