CSS transitions do not work on iPad after sleep/resume when run from homescreen

问题

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.

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.

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.

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

Here's the code from the fiddle.

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

回答1:

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

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

来源：https://stackoverflow.com/questions/27346022/css-transitions-do-not-work-on-ipad-after-sleep-resume-when-run-from-homescreen

标签

ipad

ios8

css-transitions

homescreen