テーマ

BlurのIE対応について

本文

こんにちは。佐藤です。
新年一発目の内容で新年らしさはないですが、年末にIE対応が発生したのでそちらをネタにします。

IE11では、画像へのfilter: blur; が効きません。
今回はSVGタグを利用した方法をご紹介します。

目次　想定読了時間2分

• サンプルリンク
• サンプルコード
• 解説

サンプルリンク

サンプルリンク

サンプルコード

<div class="svg_wrapper">
<svg viewBox="0 0 100 54.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="1" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%"
xlink:href="https://sakurug.co.jp/wp-content/uploads/2020/12/https___www.lifeofpix.com_wp-content_uploads_2019_02_308-name05322-jj-min.jpg"
filter="url(#blur)" />
</svg>
</div>

.svg_wrapper {
  width: 100%;
  padding-top: 36%;/* 画像全体を表示したい場合は、「画像の高さ÷画像の幅」の数値を入力 */
  position: relative;
  overflow: hidden;

  z-index: -1;
}

.svg_wrapper>svg {
  width: auto;
  height: 150%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 768px) {
  .svg_wrapper {
    padding-top: 54.1%;
  }

  .svg_wrapper>svg {
    height: auto;

  }
}

解説

第一に、CSSのfilter: blur();の代替として機能するかという部分ですが
filter: blur();もSVGの原始フィルタ feGaussianBlurも共に「Gaussianぼかし」を適用しているので
充分代替えに効きます。

他にJSのプラグインの「background-blur.js」による対応もあります。
JSにつきましては、こちらなどをご参照ください。

JSを使用しているだけでfeGaussianBlurを使っているようなので
原理上は同じ処理ですね。

さて、ぼかし具合の調整についてです。
調整はstdDeviationの数値にて行います。

大きいほど、ぼかしが強くなります。
単位の記述はないですが、
filter: blur();のピクセル単位と一致しているようです。

<feGaussianBlur stdDeviation="1" />

また、background-imageにBlurを書けていたときには
background-positionの調整どうする、問題が発生します。

こちらは、ラッパークラスを使って調整を行います。
※サンプルではsvg_wrapperとしてます

画像の高さはpadding-topにて調整してます。
こちらは基本的に正方形で計算されるので、
padding-top: 100%;だと横幅サイズが高さに適用されます。

よって、「画像の高さ / 画像の幅 * 100」として、画像の高さぴったりで調整可能です。
同様にSVGのviewportの数値も注意してください。
こちらも縦横比に合わせて変動させたほうがコントロールが効きます。

※svgのviewboxについてはこちらをご参照ください

background-sizeでcoverなどで対応している場合は、
svgのサイズで調整します。
サンプルでは高さを150%にすることで疑似的に引き延ばされた状態を再現しています。

.svg_wrapper>svg {
  width: auto;
  height: 150%;
  position: absolute;
  top: 0;
  left: 0;
}

以上です。

それでは！