CSS关键帧动画即使在带有前缀的情况下也无法在移动设备上运行

Question

我正在建立两个背景图像之间的简单的缓入/缓出过渡。这在桌面浏览器（我知道的IE / Edge除外）上可以正常工作。但是，在手机/平板电脑（尤其是iOS）上，过渡效果无法正常运行，先显示一张图片，然后显示空白屏幕，然后再过渡回原始图片。我使用了-webkit供应商前缀，所以不确定是什么原因造成的。任何帮助，不胜感激！

 #section_03 .hp_background_holder {
    -webkit-animation-name: background;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    animation-name: background;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-direction: alternate;
    display:block;
    position:relative;
}
@-webkit-keyframes background {
    0% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    25% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    50% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
    100% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
}
@keyframes background {
    0% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    25% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    50% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
    100% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
}