微信小程序使用translate3d實現無限循環移動，在IOS出現閃屏問題

reference

結構

<view class="J-slider block">
　<view class="J-scroller">
　　　　<view class="item block"></view>
　　　　<view class="item block"></view>
       <view class="item block"></view>
　　</view>
</view>

基本樣式：

@keyframes move {
    from {
      transform: translate3d(-200vw;0,0);
    }
    to {
      transform: translate3d(0;0,0);
    }
  }

  .J-slider {
    position: relative;
    overflow: hidden;
  }
  
  .block {
    width: 100vw;
    height: 50vh;
  }
  
  .J-scroller {
    width: 300vw;
    height: 100%;
    position: absolute;
    animation: move 5s 0s linear infinite both;
  }
  .J-scroller .item{
    position: absolute;
    top: 0px;
  }
  .J-scroller .item:nth-child(1){
    left: 0px;
  }
  .J-scroller .item:nth-child(2){
    left:750rpx;
  }
  .J-scroller .item:nth-child(3){
    left: 1500rpx;
  }

假如以上結構的多圖左右移動查看， J-scroller是一塊很大的動畫移動層，我們對J-scroller設置了 translate3d(x,y,z)  以及animation 動畫，

此時iphone查看移動時會有閃屏現象，因爲webkit是不會將J-scroller這麼大的層整個分配內存繪製渲染。

這時候我們需要將滾動區域可視範圍的列表項item元素緩存起來

.item{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

另外，當translate使用2d而非3d的呈現方式時，我們要設置當前動畫移動元素的呈現方式爲3d，它的所有子元素背面隱藏：

.J-scroller{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.J-scroller .item{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}