1.animation動畫掉幀閃爍

(1)觸發(fā)重新布局的屬性有： width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。應(yīng)該盡量規(guī)避使用。
(2)不會出發(fā)重新布局的屬性有：transform(其中的translate, rotate, scale), color, background等。應(yīng)該盡量用這些去取代。

2.低版本安卓中，絕對定位后的層級關(guān)系

html代碼：

<div class="line">
      <div class="right-rate-bottom"></div>
      <div class="right-rate-up"></div>
</div>

css
如果布局要求right-rate-bottom在right-rate-up下面，需要增加z-index屬性。

3.安卓4.1水平垂直居中問題

   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);

不生效，會發(fā)現(xiàn)上下垂直居中了，而左右不垂直居中。
左右居中margin:0 auto;
上下居中

    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

4.div寬度足夠，文字卻折行

具體原因未明，將div改為span標簽解決

5.ios 中，滾動區(qū)域和固定區(qū)域沖突問題

參考文章https://www.cnblogs.com/xuniannian/p/8722393.html
具體實現(xiàn)，與上述文章不是完全一樣。

css

.vh-area {
    height: 100vh;
    width: 100%;
      .scroll-area {
        position: absolute;
        top: 0;
        bottom: 1.7rem;
        left: 0;
        right: 0;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: auto;
          &::-webkit-scrollbar {
          display: block;
          width: 5px;
     }
  }
}