Zenn の emoji-mart が Safari で崩れてる

長過；未読

正直原因は分からん。
font-family 周りが原因なんだろうけど、どうやって解消するのかはさっぱり分からない。
もしかすると twemoji というライブラリが何か悪さしてるのかな？

調べてみた結果 「Emoji ができる前から定義されていたユニコード絵文字に対して『Emojiで表現すること』を指定する特殊文字 \uFE0F に対して word-wrap が適用された結果らしい。

そして word-wrap は Safari の独自プロパティっぽく、だから他のブラウザでは発生してなかった模様。（仕様までは調べていないけど、Dev-tool で除いた時に Chrome とかだと word-break しか無かったから独自プロパティかなと。）

満足。

流れ

気づく

昨日初めて zenn で記事を書いてみた。

記事の設定画面から記事に絵文字を設定できるみたい。ほほうなるほど。
絵文字を切り替えるボタンを押してみたら、なんだか表示がおかしい。

ん？　と思って chrome や firefox でみてみると崩れてない。

emoji-mart とな...

要素を検証してみると emoji-mart という文字が。

調べてみるとデモを発見。
でもこのデモだと Safari でも崩れていない。

とりあえず絵文字と言うことで怪しいのはフォント周りかなと思い、とりあえず font-family の指定を外してみた。

お前はだれだ

font-family の指定を外すと突然現れた線だけの顔文字。なんでこうピンポイントでお前だけ。。。

これは完全に font-family 周りだろうと思って別のフォント (イメージでは Helvetica) に差し替えてみる。

なんか四角が現れた。。。。
ちなみにフォントによって四角が出たり出なかったりハテナになったりする。マルチバイト文字の何かのかな？でもなんでお前だけ。。。

諦めた

同じようにフォントを変えてもオリジナルのデモページだと発生しないし、chrome や firefox でも発生しない。なんでだ。
他に font-family の指定がある箇所も全部削除してみたりしたけど結局表示はおかしいまま。
これ以上の調べ方は分からずお手上げ。
誰か続き調べてくれないかな。。。

もしかすると

Zennを支える技術とサービス構成を読んでみたら twemoji というライブラリを使っているとのこと。
もしかするともしかしてこのライブラリが悪さをしているかもしれないと思った。まる。

ちなみに

この絵文字のズレはこいつだけでなく、下にスクロールしていくと結構いる。