title: Hambuger Menu (Responsive) does not open on mobile safari (of iPhone 6)
body: <p>i tested the following responsive menu and it does not open with an iPhone 6 Safari:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;de&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache, no-store, must-revalidate&quot;&gt;
      &lt;meta http-equiv=&quot;Pragma&quot; content=&quot;no-cache&quot;&gt;
      &lt;meta http-equiv=&quot;Expires&quot; content=&quot;0&quot;&gt;
      &lt;title&gt;Hamburger-Menü Test&lt;/title&gt;
  
      &lt;style&gt;
      *,::before,::after{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Verdana', sans-serif;
      } 
      body {
        margin: 0;
        font-size:100%;
        background: #f6f8f9;
      }
  
      nav {
          display: flex;
          height: 80px;
          width: 100%;
          background: #1c3464;
          align-items: center;
          padding: 0 50px 0 50px;
          flex-wrap: wrap;
          overflow: hidden;
          position: fixed;
          top: 0;
          z-index:200000;
          border-bottom: 4px solid #9acd32;
      }
      nav ul{
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        position:absolute;
        right:20px;
      }
      nav ul li{
        margin: 0 5px;
      }
      nav ul li a{
        color: #f2f2f2;
        text-decoration: none;
        font-size: 1.1em;
        font-weight: 500;
        padding: 8px 15px;
        border-radius: 5px;
        letter-spacing: 0.05em;
        transition: all 0.3s ease;
      }
      nav ul li a.active{
        color: #111;
        background: #fff;
      }
      nav ul li a:hover {
        background:#526788;
      }
      nav .menu-btn img{
        color: #fff;
        cursor: pointer;
        display: none;
      }
      input[type=&quot;checkbox&quot;]{
        display: none;
      }
  
      @media (max-width: 1200px) {
        nav{
          padding: 0px 10px 0px 20px;
        } 
        .menu-btn {
          position:absolute;
          right:20px;
        }
        nav .menu-btn img{
          display: block;
        }
        #click:checked ~ .menu-btn i:before{
          content: &quot;\f00d&quot;;
        }
        nav ul{
          position: fixed;
          top: 80px;
          left: -100%;
          background: #173460;
          height: 100vh;
          width: 100%;
          text-align: center;
          display: block;
          transition: all 0.3s ease;
          z-index:200000;
        }
        #click:checked ~ ul{
          left: 0;
        }
        nav ul li{
          width: 100%;
          margin: 40px 0;
        }
        nav ul li a{
          width: 100%;
          margin-left: -100%;
          display: block;
          font-size: 1.3em;
          transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        #click:checked ~ ul li a{
          margin-left: 0px;
        }
        nav ul li a.active,
        nav ul li a:hover{
          background: none;
          color: cyan;
        }
      }
    &lt;/style&gt;
    &lt;/head&gt;
  &lt;body&gt;
      &lt;nav &gt;
          &lt;input type=&quot;checkbox&quot; id=&quot;click&quot;&gt;
          &lt;label for=&quot;click&quot; class=&quot;menu-btn&quot;&gt;
              &lt;img src=&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII=&quot;&gt;
          &lt;/label&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;active&quot;&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
      &lt;/nav&gt;   
  &lt;/body&gt;
      Hello world!
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I tested also with a few my Samsung (Android) devices (Chrome)
  Also with Windows (different browsers) and it works on all of them.</p>
  <p>Any idea, what i can add so that safari will also work?</p>
  <p>Please help ;-(</p>
  <p>Best wishes
  Daniel</p>