iOS9 UIWebView/Chrome CSS 过渡答案

【问题标题】：iOS9 UIWebView/Chrome CSS transitionsiOS9 UIWebView/Chrome CSS 过渡
【发布时间】：2015-10-01 18:13:20
【问题描述】：

在努力使我们的网站具有响应性时，我实现了一个菜单系统 - http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

在我们将测试 iPhone 6 从 iOS 8 更新到 iOS 9 之前，一切都很顺利。Safari 继续正常工作，但 Chrome 和我们使用 UIWebView 的应用程序不会呈现幻灯片过渡，除非我手动进入使用 Safari 网络检查器切换某些内容。

我尝试了Safari on iOS 9 does not trigger click event on hidden input file的建议，但没有效果。

我也知道 javascript 位置/哈希错误，但不确定这是否相关。

有没有人遇到过这样的事情，并找到了解决方法或修复它的方法？目前无法更新到 Safari Web View。

【问题讨论】：

所以只有在iOS9上的Chrome浏览器才会出现这个问题？你甚至可以在 iOS 上拥有除移动 Safari 之外的浏览器吗？
“你能在 iOS 上安装除移动 Safari 以外的浏览器吗？”。如果不是这样，那么苹果应用商店审查团队中的某个人就大发雷霆。
是的，您可以使用不同的浏览器。 Chrome 基于 iOS 上的 UIWebView。我可以在 Chrome 和我们的应用程序中重复上述错误。
在 iOS 9.1 上仍然是一个问题

标签： ios css uiwebview ios9 mobile-chrome

【解决方案1】：

已找到解决方案。事实证明，从 9.0.2 开始，iOS 9 UIWebView 已经破坏了 ~（波浪号）选择器。

为了解决这个问题，我不得不减少我的代码的通用性，并使用 CSS +（加号）选择器来获取我需要做的事情的选择器。

这是我作为菜单工作的一个非常基本的表示。

<input type="checkbox" class="nav-trigger" id="nav-trigger" />
<nav class="MobileMenu" />
<div class="Content">
    <label for="nav-trigger"/>
</div>

iOS9之前控制它的样式

<style>
    .Content
    {
        width: 100%;
        height: 100%; /*background-color: #fff;*/
        position: relative;
        top: 0;
        bottom: 100%;
        left: 0;
        z-index: 1;
    }
    nav.MobileMenu
    {
        list-style: none;
        width: 60%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
    nav.MobileMenu
    {
        display: none;
        overflow-y: scroll;
    }
    label[for="nav-trigger"]
    {
        position: absolute;
        margin: 7px 0 0 10px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
        background-size: contain;
    }
    .nav-trigger:checked ~ nav.MobileMenu
    {
        display: block;
    }
    .nav-trigger:checked ~ div.NotMenu
    {
        -webkit-transform: translate(60%,0);
        -moz-transform: translate(60%,0);
        -ms-transform: translate(60%,0);
        -o-transform: translate(60%,0); /*transform: translate(60%,0);*/
        transform: translate(60%,0); /*left: 60%;*/
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
    }
    .nav-triggerLink:checked ~ ul.level0
    {
        visibility: hidden;
    }
    .NotMenu
    {
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out; 
    }
</style>

改变了css

.nav-trigger:checked + nav.MobileMenu
{
    display: block;
}
.nav-trigger:checked + nav.MobileMenu + div.Content
{
    -webkit-transform: translate(60%,0);
    -moz-transform: translate(60%,0);
    -ms-transform: translate(60%,0);
    -o-transform: translate(60%,0); /*transform: translate(60%,0);*/
    transform: translate(60%,0); /*left: 60%;*/
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

【讨论】：