从主屏幕运行时，在睡眠/恢复后，CSS 过渡在 iPad 上不起作用答案

【问题标题】：CSS transitions do not work on iPad after sleep/resume when run from homescreen从主屏幕运行时，在睡眠/恢复后，CSS 过渡在 iPad 上不起作用
【发布时间】：2014-12-07 18:12:21
【问题描述】：

我最近向this question 询问了关于 jQuery 动画在从主屏幕图标运行时在睡眠/恢复后无法在 iPad 上运行的问题。自从我提出这个问题后的两周内，该问题收到了零个 cmets 和零个答案。

我花了一些时间进行调查，创建了一些小测试来了解什么有效，什么无效 - 并确认 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%';
    };
};

【问题讨论】：

标签： ipad ios8 css-transitions homescreen

【解决方案1】：

事实证明，这与 iOS 8 中的另一个错误有关（或由该错误引起），在 this question 中进行了介绍

iOS 8.1.1 更新修复了这个错误，因此在 iOS 8.1.1 中过渡动画再次正常工作。

【讨论】：