transform:rotate在手機上顯示有鋸齒的解決方案

標籤：

transform:rotate 屬於簡單好用的效果，但在手機上顯示時，會有比較明顯鋸齒。

解決方案也很簡單， 利用外層容器的overflow:hidden 加片margin:-1px 就可以解決。

原理沒去深究，理論上是向量跟位元影像的處理不一樣，這個方案也有個小問題 就是圖片變小了 ^_^ 可以用手機看看demo http://labs.aoao.org.cn/demo/transform-rotate/

update: 大家反應這方案在電腦上反而會出問題。

我測試了個新的方案rotate3d + border:1px solid transparent;，問題也算是解決了。

同時發現另一個小問題，縮放的圖片使用rotate3d 在非retina 屏片會變模糊了點點（屬於不對比不發現的），而用rotate就沒這問題，這個問題在old iPad 發現。

同時又發現另另一個小問題，iOS 4.x上的 想要平滑，縮放圖片哪種都會變模糊了點點（同樣屬於不對比不發現的），這個問題在old old iPhone 發現的。

當然，本來縮放圖片是件不好的事，可是縮放圖片在這裡是故意的，大家選適合的方案在對應的情境使用吧，原本方案就沒想著要在電腦上的瀏覽器上使用的

transform:rotate在手機上顯示有鋸齒的解決方案