How to make CSS style work in Safari browser? - html

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> <img class="logo-header" src="../img/logo-main.png" alt="#"> </div>
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">
<li class="home"><img src="../img/home.svg" alt="#" height="40px"><span>Главная</span></li>
<li class="gallery"><img src="../img/art.svg" alt="#" height="40px"><span>Галерея</span></li>
<li class="ut"><img src="../img/sew.svg" alt="#" height="40px"><span>Полезные советы</span></li>
<li class="journal"><img src="../img/portrait.svg" alt="#" height="40px"><span>Журнал</span></li>
<li class="contact"><img src="../img/contact.svg" alt="#" height="40px"><span>Контакты</span></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">
</div>
<div class="box-image instagram">
</div>
<div class="box-image whatsupp">
</div>
<div class="box-image mail">
</div>
</div>
</div>
<footer>
<div class="social-block">
<div class="social vk">
<i class="fa fa-vk fa-2x"></i>
</div>
<div class="social inst">
<i class="fa fa-instagram fa-2x gradient-icon"></i>
</div>
<div class="social wa">
<i class="fa fa-whatsapp fa-2x" target="_blank"></i>
</div>
</div>
</footer>
</body>

Answer 1

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.

Answer 2

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