iphone的微信浏览器和Safari下, keyframes中,不支持background-size?

less代码如下

.keyframes (@name, @frames) {
    @-webkit-keyframes @name { @frames(); }
    @-moz-keyframes @name { @frames(); }
    @-o-keyframes @name { @frames(); }
    @keyframes @name { @frames(); }
}
.animationName(@name){
    -webkit-animation-name: @name;
    animation-name: @name;
}
.keyframes (shipTab, {
     0% {
        background:url(img/shipAni1.jpg) no-repeat;
        background-size:cover;
    }
    25%{
        background:url(img/shipAni2.jpg) no-repeat;
        background-size:cover;
    }
    50%{
        background:url(img/shipAni3.jpg) no-repeat;
        background-size:cover;
    }
    75% {
        background:url(img/shipAni4.jpg) no-repeat;
        background-size:cover;
    }
    100% {
        background:url(img/shipAni1.jpg) no-repeat;
        background-size:cover;
    }
});
.shipTab{
    .animationName(shipTab);
   animation-iteration-count:infinite;
}
.ship{
    width: 12rem;
    height: 10rem;
}
.animatedMd{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

html

<div class=" ship  animatedMd shipTab"></div>

在安卓浏览器和微信浏览器中均显示正常
但是在iphone的Safari和微信浏览器中,backgroundimg的size都显示的原始大小

阅读 5.9k
1 个回答

遇到相同问题, 请问解决了吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题