最近在开发微信项目中，遇到一个问题，再次记录一下。

正常效果图：

2.png

代码如下：

//html
<div class="turnplate">
      <div class="wheel-light">
          <canvas class="item" id="wheelcanvas" width="460px" height="460px"></canvas>
          <img class="pointer" src="./activity/static/images/turnplate-pointer.png')"/>
      </div>
</div>

//css
.banner .turnplate .wheel-light{
    animation: light-play 1s linear infinite normal;
    -webkit-animation:light-play 1s linear infinite normal;
    position: relative;
    width: 100%;
    height:100%;
}

@keyframes light-play {
    0%{
        background-image: url('../static/images/Spring_ligin1.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    50%{
        background-image: url('../static/images/Spring_ligin2.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    100%{
        background-image: url('../static/images/Spring_ligin1.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
}

@-webkit-keyframes light-play {
    0%{
        background-image: url('../static/images/Spring_ligin1.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    50%{
        background-image: url('../static/images/Spring_ligin2.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    100%{
        background-image: url('../static/images/Spring_ligin1.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
}

转盘中的闪烁效果是由两张图做出的动画效果，在安卓机中显示正常，但是ios中显示的效果是这样的：

3.png

看到这个效果，第一个反应就是background-size没起作用，后来也证实了确实是这个原因。

QQ图片20181217091932.png

上网查了一下，发现也有人遇到了一样的问题，但是都没有找到原因，只能换一种方式去实现。

用了img标签 + jQuery的fadeIn(),fadeOut()用setInterval实现了这个效果。

//html
<div class="turnplate">
     <div class="wheel-light">
           <img class="js_ligin1 ligin" src="./activity/static/images/Spring_ligin1.png')" />
           <img class="js_ligin2 ligin" src="./activity/static/images/Spring_ligin2.png')" />
           <canvas class="item" id="wheelcanvas" width="460px" height="460px"></canvas>
          <img class="pointer" src="./activity/static/images/turnplate-pointer.png')"/>
    </div>
</div>

//css
.wheel-light{
  position:relative;
}

.ligin{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:block;
}

//js
var i =1;
setInterval(function(){
    i++;
    if(i>2){i=1;
        $('.js_ligin1').fadeIn();
        $('.js_ligin2').fadeOut();
     }else{
        $('.js_ligin2').fadeIn();
        $('.js_ligin1').fadeOut();
     }    
},300);

效果是出来了，但是不是很满意，目前没相处什么更好的方式去实现，欢迎指导。

END