title: How to make CSS style work in Safari browser?
body: <p>I’m building my first website, trying to adapt it to the most popular browsers, and the css style works correctly in all browsers except Safari. In this browser, almost everything does not work for me: the hover effect is not linear, flexbox is not displayed correctly (1,2,3 screen - as displayed in safari; 4,5,6 screen - as should be in all browsers), in the mobile version the menu by the span button does not open. I threw the code in <a href="https://autoprefixer.github.io/ru/" rel="nofollow noreferrer">https://autoprefixer.github.io/ru/</a>, because I understand that there are not enough prefixes, but it did not help me, after saving the code and updating the page, everything remained in its place. Tell me, please, what to do then?
  <a href="https://i.stack.imgur.com/fb7Da.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fb7Da.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/D9STg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D9STg.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/BKA57.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BKA57.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/b8LNu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b8LNu.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/c6mvf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c6mvf.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/rREd1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rREd1.png" alt="enter image description here"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
  }
  ::-webkit-scrollbar {
    width: 0px;
  }
  body {
    margin: 0;
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    min-height: 100%;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .wrapper {
    display: block;
    max-width: 2560px;
    flex-grow: 1;
    margin-top: 10px;
    margin-left: 20%;
    margin-right: 20%;
    position: relative;
    z-index: 7;
    text-align: center;
  }
  .content span {
    font-family: 'PT Serif', serif;
    font-family: 'PT Sans', sans-serif;
    font-size: 26px;
  }
  
  header, nav, section, footer {
    font-family: 'Merriweather', serif;
    color: rgb(0, 0, 0);
  }
  .header {
    background-image: url(../img/12321.jpg);
    background-position: top right;
    background-size: cover;
    max-height: 250px;
    width: 100%;
  }
  .nav li a {  
    display: block;
    text-align: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  .logo-header {
    height: 40px;
    position: relative;
    float: right;
    margin: 200px 10px 0 0;
  }
  .nav {
    height: 100vh;
    margin-left: calc(20% - 100px);
    position: relative;
    outline: none;
  }
  .nav ul {
    list-style: none;
    padding: 0.5em 0;
    margin: 0;
  }
  .nav ul li {
    margin: 10px;
    height: 40px;
    line-height: 40px;
    background-color: white;
    padding: 0.5em 1em 0.5em 1em;
    font-size: 24px;
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: auto 40px;
    transition: all 0.15s linear;
    border-radius: 5px;
    border: 1px solid black;
    opacity: 0.75;
  }
  .menu { 
    display: grid;
    grid-template-areas: 
      "home home"
      "gallery ut"
      "journal contact";
   grid-template-rows: 65px 65px 65px;
   grid-template-columns: 350px 350px;
   grid-gap: 10px;
    height: 100vh; 
    position: relative;
    z-index: 5;
  }
  
  .home {
   grid-area: home;
  }
  
  .gallery {
   grid-area: gallery; 
  }
  .ut {
   grid-area: ut;
  }
  .journal {
   grid-area: journal;
  }
  .contact {
   grid-area: contact;
  }
  .nav img {
    float: left;
  }
  .menu li:hover {
    background-color: #ffffff;
    opacity: 1;
  }
  @media screen and (max-width: 1024px) {
    body {
      min-height: 99vh; 
    }
      .wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
      }
  
  /* MENU STYLE */
  .menu {
    display: none;
    background-image: url(../img/Фон.png);
    height: 100%;
    position: relative;
    z-index: 5;
  }
  .nav {
    margin-left: 0;
  }
  div.burger {
   height: 30px; 
   width: 40px;
   position: absolute;
   top: 11px; 
    left: 21px;
    z-index: 30;
  }
   div.x,
   div.y,
   div.z {
    position: absolute; margin: auto;
    top: 0px; bottom: 0px;  
    background: #fff;
    border-radius:2px;
    -webkit-transition: all 200ms ease-out;
       -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
         -o-transition: all 200ms ease-out;
            transition: all 200ms ease-out;
   }  
   div.x, div.y, div.z { height: 3px; width: 26px; }
   div.y {top: 18px;}
   div.z {top: 37px;}
   div.collapse {
    top: 20px;
    -webkit-transition: all 70ms ease-out;
       -moz-transition: all 70ms ease-out;
        -ms-transition: all 70ms ease-out;
         -o-transition: all 70ms ease-out;
            transition: all 70ms ease-out;
   }
    
   
   div.rotate30 {
    -ms-transform: rotate(30deg); 
       -webkit-transform: rotate(30deg); 
       transform: rotate(30deg); 
    -webkit-transition: all 50ms ease-out;
       -moz-transition: all 50ms ease-out;
        -ms-transition: all 50ms ease-out;
         -o-transition: all 50ms ease-out;
            transition: all 50ms ease-out;     
   }
   div.rotate150 {
    -ms-transform: rotate(150deg); 
       -webkit-transform: rotate(150deg); 
       transform: rotate(150deg); 
    -webkit-transition: all 50ms ease-out;
       -moz-transition: all 50ms ease-out;
        -ms-transition: all 50ms ease-out;
         -o-transition: all 50ms ease-out;
            transition: all 50ms ease-out;     
   }
   
   div.rotate45 {
    -ms-transform: rotate(45deg); 
       -webkit-transform: rotate(45deg); 
       transform: rotate(45deg); 
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;     
   }
   div.rotate135 {
    -ms-transform: rotate(135deg); 
       -webkit-transform: rotate(135deg); 
       transform: rotate(135deg); 
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;     
   }
  div.menu-bg { 
   width: 100%;
   height: 100%; 
   position:absolute;
    top:0;
    left:0;
   -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
  }
  ul.menu {
    padding-top: 5em;
  }
  ul.menu li {
   width:300px;
    margin: 0 auto;
  }
  ul.menu span {
    text-align: right;
  }
  ul.menu li a {
    background-color: white;
   color:rgb(0, 0, 0); 
    opacity: 0.75;
  }
  section &gt; div {
    transition: transform 1s;
    transform: translateX(0px);
  }
  }
  footer {
    position: relative;
    flex-shrink: 0;
    height: 10px;
    width: 100%;
    bottom: 0;
    z-index: 6;
  }
  
  /* MAIN CONTENT */
  .box-image {
    width: 30%;
    min-width: 120px;
    height: 120px;
    background-size: 120px 120px;
    background-position: center;
    position: relative;
    float: left;
    margin: 5vh 10px 10px 10px;
  }
  @media screen and (max-width: 1024px) and (min-width: 381px) {
    .box-image {
      width: 33,3333%;
    }
  }
  @media screen and (max-width: 380px) {
    .box-image {
      width: 50%;
      height: 100px;
      background-size: 100px 100px;
    }
  }
  .vkontakte {
    background-image: url(../img/vk.svg);
    background-repeat: no-repeat;
  }
  .instagram {
    background-image: url(../img/instagram.svg);
    background-repeat: no-repeat;
  }
  .whatsupp {
    background-image: url(../img/whatsapp.svg);
    background-repeat: no-repeat;
  }
  .mail {
    background-image: url(../img/mailru.svg);
    background-repeat: no-repeat;
  }
  .link-image {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  .ContactWithMe {
    display: inline-block;
    position:relative;
    text-align: center;
    width: 100%;
  }
  
  .ContactWithMe a {
    position: relative;
    display: inline-block;
    text-align:center;
    width:120px;
    height:120px;
  }
  
  /* FOOTER */
  .social-block {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      width: 100%;
      }
  .social-block a {
      color: #000000;
      width: 40px;
      height: 40px;
      font-size: 20px;
      overflow: hidden;
      padding: 10px;
      }
  a {
      text-decoration: none;
      transition: 0.3s linear;
  }
  .vk a:hover {
      color: #45668e
  }
  .inst a:hover{
      color: #e4405f;
  }
  .wa a:hover {
      color: #25D366
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;/head&gt;
  &lt;body&gt;
    &lt;header class="header"&gt;
      &lt;div&gt; &lt;a href="../index.html"&gt; &lt;img class="logo-header" src="../img/logo-main.png" alt="#"&gt;&lt;/a&gt; &lt;/div&gt;
      &lt;nav class="nav" role="navigation"&gt;
        &lt;div class="menu-bg"&gt;&lt;/div&gt;
     &lt;ul class="menu" id="see"&gt;  
    &lt;li class="home"&gt;&lt;a href="../index.html"&gt;&lt;img src="../img/home.svg" alt="#" height="40px"&gt;&lt;span&gt;Главная&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="gallery"&gt;&lt;a href="../pages/gallery.html"&gt;&lt;img src="../img/art.svg" alt="#" height="40px"&gt;&lt;span&gt;Галерея&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="ut"&gt;&lt;a href="../pages/usefulTips.html"&gt;&lt;img src="../img/sew.svg" alt="#" height="40px"&gt;&lt;span&gt;Полезные советы&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="journal"&gt;&lt;a href="#"&gt;&lt;img src="../img/portrait.svg" alt="#" height="40px"&gt;&lt;span&gt;Журнал&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="contact"&gt;&lt;a href="../pages/contacts.html"&gt;&lt;img src="../img/contact.svg" alt="#" height="40px"&gt;&lt;span&gt;Контакты&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;               
     &lt;div class="burger"&gt;
      &lt;div class="x"&gt;&lt;/div&gt;
      &lt;div class="y"&gt;&lt;/div&gt;
                  &lt;div class="z"&gt;&lt;/div&gt;
     &lt;/div&gt; 
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div class="wrapper"&gt;
  &lt;div class=ContactWithMe&gt;
        &lt;div class="box-image vkontakte"&gt;
          &lt;a href="#" target="_blank" class="link-image"&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;div class="box-image instagram"&gt;
          &lt;a href="#" target="_blank" class="link-image"&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;div class="box-image whatsupp"&gt;
          &lt;a href="#" class="link-image"&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;div class="box-image mail"&gt;
          &lt;a href="#" target="_blank" class="link-image"&gt;&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      &lt;div class="social-block"&gt;
        &lt;div class="social vk"&gt;
          &lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-vk fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="social inst"&gt;
          &lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-instagram fa-2x gradient-icon"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="social wa"&gt;
          &lt;a href="#"&gt;&lt;i class="fa fa-whatsapp fa-2x" target="_blank"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>