[bug]微信小程序使用 <scroll-view> 和 box-shadow 引起页面抖动

背景

为了实现点点点动态loading效果，并且方便使用（只需要给一个空元素加一个.loading），有如下代码：

    .loader {
      background-color: #fff;
      font-size: 25px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 10px auto;
      position: relative;
      -webkit-animation: load 1s infinite ease;
      animation: load 1s infinite ease;
    }
  @keyframes load {
    0% {
      background-color: #adc2cc;
      box-shadow: 16px 0 0 0 #e4ebee, -16px 0 0 0#7799AA;
    }
    50% {
      background-color: #e4ebee;
      box-shadow: 16px 0 0 0 #7799aa, -16px 0 0 0#adc2cc;
    }
    100% {
      background-color: #7799aa;
      box-shadow: 16px 0 0 0 #adc2cc, -16px 0 0 0#e4ebee;
    }
  }

这样，只需要在页面中使用<view class="loading"> </view>即可出现点点点动态loading效果。

但是，在 iphone 真机上，如果<scroll-view>内有以上的 loading ，滑动页面时，会有强烈的抖动。

原因
猜测可能是 animation 中，无限次使用 box-shadow 导致微信小程序 webview 无限次计算元素的宽高导致。

转载于:https://www.cnblogs.com/fayin/p/8549763.html