目次
chromeだけ！画像が特定の条件下でぼやける事件
好きなパンはフォカッチャです。とらりんです。
さてさて、今回はある条件下で遭遇した奇妙な事件についてお話しようと思います。
事件発生
とあるサイトを作成中、ふと気づきました。
「あれー、パソコンなのになんか画像がぼやけてるなあ」
画像は拡大縮小せず原寸サイズ通りです。
普段はchromeをメインに作業しているので他ブラウザでも確認することに。
するとIE、Firefoxではぼやけていない。なぜかchromeだけ。
（あ、私はWindows派です。）
いったい何が、どの設定が影響してるのか？？
捜査開始
とにかく思い当たる事を片っ端からやってみることに。
line-height、width, heightの指定など。でも解決せず。
あれ、そもそも画像サイズの問題？と思い至り、画像サイズを確認すると縦横ともに奇数。
ひょっとして。。と画像サイズを偶数にしてみると。。
見事に解決！ぼやけてなーい！
ふ~やれやれと胸をなでおろすも、何かひっかかる。
これまで縦横とも奇数サイズの画像を使ったことは無かった？いやある。
これまで原寸でなんかぼやけてるなあと思ったことあったっけ？いやない。
てことは、今回の事件はサイズだけの問題ではないのでは？
そう、実はこの段階では根本的な解決には至っていなかったのです。
事件解決
ではいったい原因はなんなのか。
htmlソース、CSS設定をじーーーっと見直してみます。
ぼやけている画像は下記のようにpositionとtransformで囲み要素の中央に配置しています。
position: absolute;
transform: translate(-50%, -50%);
試しにこの設定を解除してみることに。
positionを解除。解決せず。
transformを解除。解決せ。。。じゃなくて解決！
はい、つまり画像がぼやけた原因はtransformの設定だったのです。
transformはくせ者のようです。使用の際は用法用量に十分お気を付けください。
まとめ
画像が奇数サイズ→transformを使用→画像がぼやける
画像が奇数サイズ→transform未使用→画像ぼやけない
画像が偶数サイズ→transformを使用→画像ぼやけない
参考にデモサイトも作りました。
なんだかごちゃっとしましたが結論はこうです。
画像サイズは偶数で作ろう！
解決策はごくごくシンプルなのでありました。。
ショップアイズは大阪のWeb制作会社「アイズオブシー」が運営する
Shopify（ショッピファイ）専門のEC構築サービスです。
Shopify（ショッピファイ）の構築・運用にお困りの場合は気軽に相談ください。
