iOS 9.0でSVGにtext-shadowのカンマ区切り記法を適用すると描画がおかしい問題

2018年にもなってiOS 9.0の記事を書くのはどうかしている感がありますね。

概要

iOS 9.0でSVGのTEXTタグにCSSでtext-shadowをカンマ区切りで複数適用すると、本来描画される文字列の下の方にもうひとつ文字列が描画されてしまうwebkitの不具合があります。

text-shadowをカンマ区切りで指定。

    .text-shadow {
      text-shadow: -2px -2px 0 #F00, 2px 2px 0 #F00;
    }

文字列が二重に表示される。

対策

下記のいずれかの対策がおすすめです。

  1. iOS 9を対象外にする
  2. SVGを使わない選択肢を考える
  3. text-shadowのカンマ区切りを使ったスタイルを諦める

しかし、何らかのしがらみでどうしても上記の対策を取れない場合は次のような対策方法があります。

  • 文字列を重ねて表示して、それぞれに別のtext-shadowを適用する
    <svg xmlns="http://www.w3.org/2000/svg"
         width="500" height="200" viewBox="0 0 500 40">
      <text x="0" y="35" font-size="35" class="text-shadow-1">
        Lower
      </text>
      <text x="0" y="35" font-size="35" class="text-shadow-2">
        Lower
      </text>
    </svg>

この方法には、セマンティックが壊れるという欠点があるので注意して使用する必要があります。

再現コード

下記は再現コードです。

JS Bin on jsbin.com

参考

webkitの類似バグ

https://bugs.webkit.org/show_bug.cgi?id=111216 https://bugs.webkit.org/show_bug.cgi?id=139810