iOS9 UIWebView / Chrome CSS過渡

Question

在使我們的網站具有響應能力的同時，我按照以下步驟實施了菜單系統-http: //www.sitepoint.com/pure-css-off-screen-navigation-menu/

在我們將測試的iPhone 6從iOS 8更新到iOS 9之前，一切都進行得很順利。Safari繼續正常運行，但是Chrome和使用UIWebView的應用程序不會呈現幻燈片過渡，除非我進入並使用手動切換某些內容Safari Web檢查器。

我嘗試了來自iOS 9上Safari的建議， 不會在隱藏的輸入文件上觸發click事件 ，但它沒有任何效果。

我也了解javascript的位置/哈希錯誤，但不確定是否與之相關。

有沒有人遇到過這樣的事情，找到了解決方法或解決方法？ 當前無法更新到Safari Web View。

Answer 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);
}