0
我最近问了this question关于jQuery动画在主屏幕图标运行后睡眠/恢复后无法在iPad上工作。自从我提出这个问题以来，这个问题在两周内得到零评论和零答案。从主屏幕运行睡眠/恢复后，CSS转换无法在iPad上工作
我花了一些时间调查，创建小测试以了解什么可行，哪些不行 - 并确认jQuery在这里没有错，而是移动Safari。
我创建了这个简单的测试：http://jsfiddle.net/87r3vfe1/ - 它根本不使用jQuery，而是使用纯javascript和CSS过渡动画。这在实际的Safari浏览器中很好 - 直接和睡眠/恢复后 - 在刚开始时从主屏幕图标开始工作。然而，在休眠/恢复之后，过渡动画不再起作用 - 并且屏幕在指示的延迟之后简单地改变。
因此，看起来我实际上在移动Safari中发现了一个错误。有没有人有任何解决办法的想法？
这是来自小提琴的代码。
HTML：
<div id="parent">
<div id="child1">
<div class="button" id="button1">Animate</div>
</div>
<div id="child2">
<div class="button" id="button2">Animate</div>
</div>
</div>
CSS：
body {
margin: 0px;
padding: 0px;
}
#parent {
width:100%;
height:300px;
position: relative;
}
#child1 {
position: absolute;
width:100%;
height:100%;
left: 0px;
background-color: yellow;
transition: left 400ms ease-in-out;
-webkit-transition: left 400ms ease-in-out;
}
#child2 {
position: absolute;
width:100%;
height:100%;
left:100%;
background-color: red;
transition: left 400ms ease-in-out;
-webkit-transition: left 400ms ease-in-out;
}
.button {
border: solid 1px black;
text-align: center;
width: 100px;
padding: 10px 20px;
background-color: lightGrey;
cursor: pointer;
}
的Javascript：
document.onload = function() {
document.getElementById('button1').onclick = function() {
document.getElementById('child2').style.left = '0px';
document.getElementById('child1').style.left = '-100%';
};
document.getElementById('button2').onclick = function() {
document.getElementById('child1').style.left = '0px';
document.getElementById('child2').style.left = '100%';
};
};