• transform:rotate在手机上显示有锯齿的解决方案大全


    先来个兼容性说明,洗洗脑:

    div
    {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); /* Opera */
    }

    1.来自【作者:梦幻神化】的blog:

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例:-webkit-transform: rotate(5deg) translateZ(0);

    作者说:不过使用iPad下的Safari打开网页,仍会有锯齿。

    兼容:GPU加速是在IE9时才加入的

    经过我测试,iPad已经没有锯齿了,应该是新版的Safari优化了这地方

    2.来自【嗷嗷】的blog:

    利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。
    这方案在电脑上反而会出问题。
    新的方案rotate3d + border:1px solid transparent;,问题也算是解决了。
    本来缩放图片是件不好的事,可是缩放图片在这里是故意的,大家选适合的方案在对应的场景使用吧,原本方案就没想着要在电脑上的浏览器上使用的

    对于图片我目前看法:对于一些不重要的图片,比如:一些icon、logo等对于图片质量要求不高的图片使用1:1,对于头像、商品图片要求质量比较高的,选择1:2还是不错的

  • 相关阅读:
    Genealogical tree(拓扑结构+邻接表+优先队列)
    确定比赛名次(map+邻接表 邻接表 拓扑结构 队列+邻接表)
    Agri-Net
    Network()
    Conscription
    Matrix(类似kruskal)
    Highways(求最小生成树的最大边)
    Shell学习之Shell特性(一)
    Linux学习之用户管理命令与用户组管理命令(十五)
    Linux学习之用户配置文件详解(十四)
  • 原文地址:https://www.cnblogs.com/liu-fei-fei/p/5593654.html
Copyright © 2020-2023  润新知