Retina対応と言うと通常の画像をRetinaディスプレイで見ると画像がぼけたりすることについて対応するために、掲載するスペースの2倍や3倍の画像を用意するといった手法がとられます。縦横それぞれ2倍で作って半分のサイズで指定するって形ですね。

これで対応出来ない問題が発生したのです。

どんな問題が発生したのか

今回悩んだのは1pxの線を背景画像に使ったRetina対応です。(正確に言うとdpiが高いディスプレイで発生する為、所謂Retinaの定義に合わなくても発生するのですが)

今回、背景画像に1pxの破線を使ったのですが、FireFoxとIE、iPhoneにおいて一部の破線が見かけ太くなる問題が発生したのです。スクロールやズームをすると太くなる破線が変わる状況・・・(どうしたものか)

すぐにディスプレイの問題だろうから、Retina対応をすれば治るだろうと、ここまではピンときたのです。

しかし結局、上記のRetina対応に倣って、2倍にしたり3倍にしたりしてみたのですが無駄でした。

じゃあどうやって解決したか

解決方法は単純でした。1px*7pxで作った破線を2px(黒と透過を1pxずつ)*14pxで作り直し、CSSに下記のようにyを等倍、xを1/2で記載しました。

background-size: 7px 2px;

するとFireFoxもIEもiPhoneで見ても嘘のように綺麗になりました！

困っている人は試して見ると良いでしょう。

しかし根本的な解決ではないので、更に細かなディスプレイが出てきた時にはまた発生する恐れがあります・・・。

SVGなどで対応するのが一番なんでしょうね。とはいえ、要件で使えないのであればこういう工夫をせざるを得ないのです・・・くっ！