チェックボックスやラジオボタンのtransform：scaleでの拡大がぼやけてしまう。

Question

CSS3のtransform：scaleを使って、チェックボックスやラジオボタンを拡大させました。
しかし、MacのGoogle Chromeで見た時、無理やり拡大したようにぼけてしまいます。
これを回避する良い方法はありませんでしょうか？（他ブラウザは大丈夫のようですが・・・）
デフォルトのまま拡大するのは難しいのでしょうか？

下図のようにぼやけてしまいます。。

###該当のソースコード
ここに言語を入力
input[type="radio"] {
transform: scale(1.5);
}

Answer 1

自分の環境(Win7)ではchromeとIE11は大丈夫でしたけど、firefoxでは拡大されて粗い感じになりましたね。
同じ見え方にしたいのであれば、画像なりを使ってCSSなどでやるしかないかもです。

Comments

[sobakoo]

Winだとまた変わるのですね！ちなみにMacだとfirefoxでは問題なかったりします。
scaleが手軽で良いかと思ったのですが、やはりブラウザ対応的に難しいのですね。。
画像にする方法にしました。ありがとうございました！

Answer 2

Scaleじゃないとダメな理由はなんですか？
普通にwidth: 100px; height: 100px;じゃダメですか？

Answer 3

macが手元に無いので的確なアドバイスはできないのですが、
以下を試してみると良いことが起きるかもです。。
あまり期待はしないでください。。

input[type="radio"] {
   margin-left:30px;
}

/*ベンダープレフィックスを付けてみる*/
.plan1{
  -webkit-transform: scale(1.5);
}

/*scale3dを使ってみる*/
.plan2{
  transform: scale3d(1.5,1.5,1.5);
}

/*plan1+plan2*/
.plan3{
  -webkit-transform: scale3d(1.5,1.5,1.5);
}

<input type="radio" class="plan1">
<input type="radio" class="plan2">
<input type="radio" class="plan3">