主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Safariでフォーム要素にフォーカスが当たるとposition: fixed; している要素の文字が一瞬細くなる

まぁ、こんなことはあまりないとは思うのですが、Safariでフォーム要素にフォーカスが当たると、そのページで position: fixed; している要素(固定ヘッダーとか)の文字が一瞬細くなる、ということがあったので、調べたらほぼ同じようなことを知恵袋で聞いてる人がいて、解決したので書いておきます!

元々safariは、他のブラウザよりフォントが太く表示されています それは-webkit-font-smoothingのデフォルト値がsubpixel-antialiasedになっているからだそうで fixedを指定する事で-webkit-font-smoothingがantialiasedに変更されてしまうのかもしれません

引用元:"「fixed」を使って背景やボックスを固定すると、ページ中のフォントが薄... - Yahoo!知恵袋

position: fixed; している要素に対して、

-webkit-font-smoothing: subpixel-antialiased;

を追加してあげるといけました。

しかし、これ回答している人すごいな。。。