zoukankan      html  css  js  c++  java
  • 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 发现的。

    当然,本来缩放图片是件不好的事,可是缩放图片在这里是故意的,大家选适合的方案在对应的场景使用吧,原本方案就没想着要在电脑上的浏览器上使用的

  • 相关阅读:
    4.7字符串
    4.5 基本类型和运算符
    4.4 变量
    4.6 字符串
    hp
    openstack newton linuxbridge 改成 ovs
    理解裸机部署过程ironic
    csredis base usage
    redisclient can not connect
    Linux Install redis
  • 原文地址:https://www.cnblogs.com/pao8041/p/4293536.html
Copyright © 2011-2022 走看看