css在移动端常遇到的问题此css启用了硬件加速。对于有-webkit-overflow-scrolling的网页，Sa

1.overflow: scroll在iOS上滑动卡顿的问题

解决方法：

-webkit-overflow-scrolling: touch;

原因：

此css启用了硬件加速。对于有-webkit-overflow-scrolling的网页，Safari真的用了原生控件来实现，会创建一个UIScrollView，提供子layer给渲染模块使用。-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。

2. rem移动端常用单位转换

@function r($px) {
  @return  round($px *1000 / 32 ) / 1000 * 1rem;
}

// 1080设计稿
@function v($px) {
  @return round($px * 10000 / 1080) / 10000 * 100vw;
}
// 720设计稿
@function v2($px) {
  @return round($px * 10000 / 720) / 10000 * 100vw;
}

3. CSS3 animation not working if safari( CSS3 的 animation 属性在 safari 上失效 )

最开始

.xx {
   animation: xxx 2s steps(2, end) infinite; 
}


@keyframes xxx {
    0% {
      background: url('#{$imgPrefix}xxx.png') no-repeat -143px -3px/280px 280px;
    }

    100% {
      background: url('#{$imgPrefix}xxx.png') no-repeat 143px -273px/280px 280px;
    }
}

修改后

.xx {
   animation: xxx 2s steps(2, end) infinite; 
}


@keyframes xxx {
    0% {
      background-image: url('#{$imgPrefix}xxx.png');
      background-repeat: no-repeat;
      background-position: -143px -3px;
      background-size: 280px 280px;
      
    }

    100% {
      background-image: url('#{$imgPrefix}xxx.png');
      background-repeat: no-repeat;
      background-position: 143px -273px;
      background-size: 280px 280px;
    }
}

上述写法依旧不生效，不过我们也可以看到，将background属性拆分之后，有几个属性是被重复写了。将属性一个一个进行测试，发现是background-size属性出现了问题。

最终：

.xx {
  background-image: url('#{$imgPrefix}xxx.png');
  background-repeat: no-repeat;
  background-size: 280px 280px;
  animation: xxx 2s steps(2, end) infinite; 
}


@keyframes xxx {
    0% {
      background-position: -143px -3px;
    }

    100% {
      background-position: 143px -273px;
    }
}

既优化了代码，又解决了safari的兼容性问题。因此在写animation和background等属性的时候，可以将属性拆分开来写，可以避免一些隐性的坑出现。

参考文档：

原因：从上述文章可以看出有人和我遇到了同样的情况，从解释来看，应该是safari,对属性的支持存在问题，因此需要将其拆分开来写。

4. 开启3d硬件加速，让GPU参与合成层，减少重绘和重排

transform: translate3d( 0, 0, 0);

5. 去掉a标签链接点击后蓝色阴影

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
或
-webkit-tap-highlight-color:transparent;
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

工程化工具编译时，需要加上/* stylelint-disable */和/* stylelint-enable */,因为autoprefixer工具会自动加-webkit-等头部，因此需要编译工具忽略掉这段代码

/* stylelint-disable */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
/* stylelint-enable */

参考文档： stylelint.io/user-guide/…

You can temporarily turn off rules using special comments in your CSS. For example, you can either turn all the rules off:

/* stylelint-disable */
a {}
/* stylelint-enable */

6. 如何让chrome支持小于12px的文字

chrome默认最小文字为12px,小于12px的字体都以12px显示

首先，遇到这个问题的时候可以建议让设计师对字号进行调整，因为不建议将字号小于12px，亲测过在字号小于12px的时候，文字需要很努力才可以看到。正常人开着都很困难，对视力障碍者来说就更是不方便了。所以，最好的解决这个问题的办法应该是，尽量不设置小于12px的属性值。

解决方法：

设置-webkit-text-size-adjust:none;（最新chrome已不支持）
设置-webkit-transform:scale(0.8);

.chrome_adjust {
  font-size: 10px; //针对可以识别12px以下字体大小的浏览器
  -webkit-transform: scale(0.8);
  -webkit-transform-origin-X: left; //定义文字相对于X轴的位置
  -o-transform: scale(1); // 针对能识别-webkit的opera browser设置  
  display: inline-block;
}

为什么要设置display: inline-block; 因为scale属性只对可以定义宽高的元素有效。

<a>                                         
    Products
    <sup class="forcefontsize10">
        88
    </sup>
</a>

.forcefontsize10 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.83,0.83);
}
 
.forcefontsize8 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.66,0.66);
}
 
.forcefontsize6 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.5,0.5);
}

重点：

CSS规则“-webkit-text-size-adjust:none;”针对版本为27以前的chrome可自定义小于12像素的大小；
Chrome更新到27版本就不支持“-webkit-text-size-adjust:none;”了，需要使用CSS3的新规则：“-webkit-transform : scale(0.83,0.83);”，缩放指定dom，但必须是block级
CSS规则“display: inline-block;” 可允许指定文字不需要变成Block的独立一行，实现行内的小字体显示