Как заставить стиль CSS работать в браузере Safari? ⇐ Html

[Anonymous]

Я создаю свой первый веб-сайт, пытаюсь адаптировать его к самым популярным браузерам, и стиль CSS корректно работает во всех браузерах, кроме Safari. В этом браузере у меня не работает почти всё: эффект наведения не линейный, флексбокс отображается некорректно (1,2,3 экран - как отображается в сафари; 4,5,6 экран - как должно быть во всех браузерах), в мобильной версии не открывается меню по кнопке прокрутки. Код я закинул в https://autoprefixer.github.io/ru/, так как понимаю, что не хватает префиксов, но мне это не помогло, после сохранения кода и обновления страницы все осталось на своих местах. Подскажите, пожалуйста, что тогда делать?

Код: Выделить всё

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
}

Код: Выделить всё

 [url=../index.html] 
[img]../img/logo-main.png[/img]
[/url]


[list]
[*][url=../index.html]
[img]../img/home.svg[/img]
Главная[/url]
[*][url=../pages/gallery.html]
[img]../img/art.svg[/img]
Галерея[/url]
[*][url=../pages/usefulTips.html]
[img]../img/sew.svg[/img]
Полезные советы[/url]
[*][url=#]
[img]../img/portrait.svg[/img]
Журнал[/url]
[*][url=../pages/contacts.html]
[img]../img/contact.svg[/img]
Контакты[/url]
[/list]









[url=#][/url]

[url=#][/url]

[url=#][/url]

[url=#][/url]






[url=#][/i][/url]

[url=#][i][/i][/url]

[url=#][i][/i][/url]

Подробнее здесь: https://stackoverflow.com/questions/624 ... ri-browser