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; }
文字列が二重に表示される。
対策
下記のいずれかの対策がおすすめです。
しかし、何らかのしがらみでどうしても上記の対策を取れない場合は次のような対策方法があります。
- 文字列を重ねて表示して、それぞれに別の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>
この方法には、セマンティックが壊れるという欠点があるので注意して使用する必要があります。
再現コード
下記は再現コードです。
参考
webkitの類似バグ
https://bugs.webkit.org/show_bug.cgi?id=111216 https://bugs.webkit.org/show_bug.cgi?id=139810