ラック
Home > CMS > 記事 > 2015年2月 > 俺のAndroidChromeで が「・」になってしまうんだが

俺のAndroidChromeで が「・」になってしまうんだが

カテゴリ: WordPress

実験でWordPressの「Dynamic To Top」プラグインを使ってみたのですが、Android Chromeで表示したときだけ「^(上向きの矢印)」の中にドットが表示され、「↑」っぽい形(でも縦棒ではなく点だし、しかも場所がずれてるので「↑」になりきれてない)になるという症状に遭遇。

試しにPC版ChromeやiPhoneのChromeでも表示させてみましたが、問題なし。Android版Chromeのみの症状のようです。

調べてみたら…ありました。これはSimplicityプラグイン1.4.7での症状と対策として取り扱われていますが、原因はChromeのバグとのこと。

とはいえ、googleがバグ修正のアップデートが行うまで待っているだけというのもアレなので、自前で何とかします。

幸い、原因は だと分かっている上に、これを などの他の空白文字っぽいものに置き換えれば症状が抑えられる、という対策まで分かっているので、これを実装します。

「Dynamic To Top」プラグインは普通にブラウザで表示させてソースコードの表示をしても該当するタグが存在せず、FireBugでは確認できることから最後に動的に付与しているものと考えられます。
また、該当するhtmlタグはaタグにid「dynamic-to-top」が付けてあり、その中のspanタグの中にスペースが存在しているのがFireBugで確認できたので、このspanタグの中のスペースが だと思われます。
これを踏まえると、置き換えるタイミングはサーバサイドよりもクライアントサイド、つまりjavascriptなら間違いないだろう、ということでjQueryで該当箇所の を置換するスクリプトを書きます。

$(function(){
	var txt = $("#dynamic-to-top span").html();
	txt = txt.replace(/^(%u3000|%20|%09)+| /g,' ');
	$("#dynamic-to-top span").html(txt);
});

あとはこれをbody終了タグの直前で読み込ませるだけ。WordPressならget_footerタグの後ろでも良し。

この処置を行ったところ、無事に症状は消えましたとさ。めでたしめでたし。

タグ: デザイン・ビジュアル, トラブル対処

 



関連する記事一覧