Android6.0と7.0で特殊文字の三角の色が変更不可:メモ

ちゃんと調査している時間も無いので浅いながらもメモ的に。

テーマは、Androidの6.0以降で、特殊文字の一部が絵文字になってしまうのか、cssで色変更ができなかったことに関してです。

確認した状態

環境を先に記載しますが、まずは実機。

• Android実機 「Garaxy S7 edge」
• OSは6.0.1と7.0
• ブラウザとChromeで確認

次いでエミュレーター。

• Ganymotion 「Samsung Galaxy S7」
• OSは6.0
• ブラウザで確認

上記の環境で、以下の状態を確認。

• 特殊文字の「▶︎」を使用
• 実機では、cssのcolorで色が変わらない
• font-familyを変えても変化無し
• エミュレーターでは、色は変わる

以下は、いくつかの特殊文字にCSSでcolorをredで設定し、実機7.0で表示した際のスクリーンショットです。

上記の中では、左と右向きの三角だけ他と状態が違うことがわかります。

詳細に調べていないので具体的な条件はわかっていませんが、Androidのバージョンか端末に原因があるかもしれません。

結び

私が遭遇した箇所には代替手段を取れましたので、概ね問題ない形で対応できました。

しかし、本文中に普通の文字として使っている場合は、その箇所を特定して手動でなんらかの対応をする必要があり、手間がかかりそうです。

ちなみに思いついた代替手段は以下の3つ。
必須条件は、三角形の色をcssで変えられること。

1. 疑似要素を用い、三角にくり抜いた部分を透過させた画像を背景に指定して対応
2. アイコンフォントを作って対応
3. 疑似要素を用い、borderを使って三角形を作って対応

上記を検討した結果、背景色が一定ではないため1は除外で、読み込むファイルを増やしたくないので2も除外で、結果3を採用しました。