[CSS] 用 transform scale 針對 input checkbox 放大


左一: safari / 中間:  Chrome / 後: Firefox

今天在製作一個 checkbox 時,為了在手機版上方便點擊,刻意想要把它放大。

就以放大三倍來說,就是 scale(3):


這段都沒問題,我只是想說, transform 的表現在 safari 沒有用,如上圖你可以看到,還是一樣小顆,甚至他只有在 :active 時才會放大,也是一個很詭異的行為。
在 Stackoverflow 也有人跟我有一樣的問題,原因是在 webkit 下要用 3d transform 去處理這個放大的效果。

後來我就把 webkit 那一段改成 scale3d:

文章中也有參考的link,可以去詳讀看看
http://stackoverflow.com/questions/31843647/webkit-css-transforms-scaling-doesnt-work-on-retina-mac-if-the-scale-factor-is
有更好的方式也可以留言跟大家分享一下,感謝! :D

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源