How to make CSS style work in Safari browser?

Question

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 https://autoprefixer.github.io/ru/, 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?

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 > 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
}

</head>
<body>
  <header class="header">
    <div> <a href="../index.html"> <img class="logo-header" src="../img/logo-main.png" alt="#"></a> </div>
    <nav class="nav" role="navigation">
      <div class="menu-bg"></div>
   <ul class="menu" id="see">  
  <li class="home"><a href="../index.html"><img src="../img/home.svg" alt="#" height="40px"><span>Главная</span></a></li>
        <li class="gallery"><a href="../pages/gallery.html"><img src="../img/art.svg" alt="#" height="40px"><span>Галерея</span></a></li>
        <li class="ut"><a href="../pages/usefulTips.html"><img src="../img/sew.svg" alt="#" height="40px"><span>Полезные советы</span></a></li>
        <li class="journal"><a href="#"><img src="../img/portrait.svg" alt="#" height="40px"><span>Журнал</span></a></li>
        <li class="contact"><a href="../pages/contacts.html"><img src="../img/contact.svg" alt="#" height="40px"><span>Контакты</span></a></li>
      </ul>               
   <div class="burger">
    <div class="x"></div>
    <div class="y"></div>
                <div class="z"></div>
   </div> 
    </nav>
  </header>
  <div class="wrapper">
<div class=ContactWithMe>
      <div class="box-image vkontakte">
        <a href="#" target="_blank" class="link-image"></a>
       </div>
       <div class="box-image instagram">
        <a href="#" target="_blank" class="link-image"></a>
       </div>
       <div class="box-image whatsupp">
        <a href="#" class="link-image"></a>
       </div>
       <div class="box-image mail">
        <a href="#" target="_blank" class="link-image"></a>
       </div>
    </div>
  </div>
  <footer>
    <div class="social-block">
      <div class="social vk">
        <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>
      </div>
      <div class="social inst">
        <a href="#" target="_blank"><i class="fa fa-instagram fa-2x gradient-icon"></i></a>
      </div>
      <div class="social wa">
        <a href="#"><i class="fa fa-whatsapp fa-2x" target="_blank"></i></a>
      </div>
    </div>
  </footer>
  </body>

Just to make sure: after you updated your code and reloaded your page did you make sure it did not load any old cached files? — Mathyn, Jun 16 '20 at 12:18
Do a hard refresh (on Mac OS using CMD+SHIFT+R) instead of just refreshing the page in order to make sure it gets reloaded correctly. CSS does not get reloaded every time you refresh. — Tim Anthony, Jun 16 '20 at 12:19
After resetting the safari, only footer fell into place. Everything else does not work correctly. — Sasha, Jun 16 '20 at 12:30

score 0 · Answer 1 · answered Jun 16 '20 at 12:28

0

Seems to me that some elements get display: block which is the default.

Did you try adding all prefixes for display: flex ?

display: -webkit-box;      // OLD - iOS 6-, Safari 3.1-6
display: -moz-box;         // OLD - Firefox 19- (buggy but mostly works)
display: -ms-flexbox;      // TWEENER - IE 10
display: -webkit-flex;     // NEW - Chrome
display: flex;             // NEW, Spec - Opera 12.1, Firefox 20+

For Safari try adding -webkit- prefix to all flexbox properties.

answered Jun 16 '20 at 12:28

Datsos

528
1
8
13

I have this line in the code, if you go over your eyes more carefully, thanks :) I figured out how to fix main content, but the question remains how to fix the site’s navigation, it’s not made as flexbox, but as grid. And what to do, here I do not understand at all. – Sasha Jun 16 '20 at 12:42
I went over the code carefully and you do not use -webkit-flex. You use -webkit-box which is for old safari. – Datsos Jun 17 '20 at 13:17

score 0 · Answer 2 · answered Jun 16 '20 at 12:37

0

Safari still requires the -webkit- prefix to use flexbox.

Just try -webkit-flexbox. it's working for safari., webkit-flex safari will not taking.

I advise you to see that:

How do I make flex box work in safari?

sorry for google translate

answered Jun 16 '20 at 12:37

DELORME Joris

97
1
7

No, Safari does not require the `-webkit-` prefix. – disinfor Jun 16 '20 at 12:50
Thank you, I have this line in the code. My menu doesn’t work correctly, but it is made up using a grid, and I can’t fix it. – Sasha Jun 16 '20 at 12:54

How to make CSS style work in Safari browser?

2 Answers2