在iOS9

Question

我的手机页面上有一个动画侧面板。当我单击“菜单”按钮时，侧面板将使用CSS过渡滑动。我正在使用translate3d因为我需要动画来使用硬件加速。

一切正常，直到iOS9。 在10次中有9次，侧面板只显示而不是动画。使用2D过渡仍然可以正常工作（但不是硬件加速）。

HTML：

<div id="open">OPEN</div>
<div id="sideBarContainer">
    <div id="someHeader">
        CLOSE
    </div>
    <div id="someContent">
        CONTENT
    </div>
</div>

CSS：

#sideBarContainer{
    background: red;
    height: 300px;
    width: 80%;
    position: absolute;
    top:0;
    margin-left: -82%;
    transition-duration: 0.25s;
    transition-property: transform;
}
#someHeader{
    padding: 20px;
    text-align: left;
}
#someContent{
    padding: 20px;
    text-align: left;
}

JS：

$("#open").on("click", function() {
    $("#sideBarContainer").css("transform", "translate3d(400px,0,0)")
});
$("#someHeader").on("click", function() {
    $("#sideBarContainer").css("transform", "translate3d(-400px,0,0)")
});

我为你们创建了一个JSFiddle： https://jsfiddle.net/1ttgfLaL

如果你想知道为什么我在JS中设置translate3d，那是因为我需要先计算像素。

我相信这是一个iOS Bug，有没有人有解决方法的想法？或者我做错了什么？

一个奇怪的问题是，在我的生产代码中，这个错误也会出现，但不会出现在侧面板的第二个元素内部（在我的示例代码中是#someContent div）。那个元素总是动画。

感谢任何帮助！

干杯。 Amiroo