从主屏幕运行后，睡眠/恢复后，CSS转换在iPad上不起作用 [英] CSS transitions do not work on iPad after sleep/resume when run from homescreen

问题描述

我最近向jQuery询问了这个问题从主屏幕图标运行后，睡眠/恢复后动画无法在iPad上运行。自从我提出这个问题以来的两周内，这个问题得到了零评论和零答案。

I recently asked this question about jQuery animation not working on iPad after sleep/resume when run from a homescreen icon. That question received zero comments and zero answers in the two weeks since I asked it.

我花了一些时间调查，创建小测试以了解什么有效，什么无效t - 并确认jQuery在这里没有错，而是移动Safari。

I spent some more time investigating, creating small tests to understand what works and what doesn't - and confirmed that jQuery is not at fault here, but rather the mobile Safari.

我创建了这个简单的测试： http://jsfiddle.net/87r3vfe1/ - 根本不使用jQuery而是使用普通的javascript和CSS过渡动画。这在真正的野生动物园中完全正常 - 直接和睡眠/恢复后 - 并在刚开始时从主屏幕图标开始工作。然而，在睡眠/恢复之后，过渡动画不再起作用了 - 屏幕只是在指示的延迟后改变。

I created this simple test: http://jsfiddle.net/87r3vfe1/ - which does not use jQuery at all and instead uses plain javascript and CSS transition animation. This works perfectly fine in the actual safari - straight away and after sleep/resume - and works from the homescreen icon when just started. However after the sleep/resume, the transition animation does not work anymore - and the screen simply changes after the indicated delay.

所以，好像我实际上发现了一个bug在移动野生动物园。有没有人对解决方法有任何想法？

So, it seems like I actually found a bug in the mobile safari. Does anybody have any ideas for a workaround?

以下是小提琴的代码。

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：

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%';
    };
};

推荐答案

事实证明，这与（或由）iOS 8中的另一个错误，包含在 this中问题

Turns out, this was related to (or caused by) another bug in iOS 8, covered in this question

iOS 8.1.1更新修复了此错误，因此iOS 8.1.1转换动画再次正常工作。

iOS 8.1.1 update fixes this bug, so with iOS 8.1.1 transition animations work correctly again.

这篇关于从主屏幕运行后，睡眠/恢复后，CSS转换在iPad上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！