Центр Div в Div на сафари ⇐ CSS

[Anonymous]

мой друг проверил мой веб-сайт oxitania.eu на своем Mac Safari, и он прислал мне скриншот, который в моем . Я использую Firefox, я тестировал на сайте браузерлинг, в версии Safari, и я также вижу эту ошибку CSS:
на Firefox и Chr -r -chry my shis! на Firefox] [2]] [2]
my html структура:

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

            [url=#]Saint Aubin de Nabirat[/url]
[url=#]Dordogne[/url]
[url=#]Périgord Noir[/url]
[url=#]Accommodation[/url]
[url=#]Restaurants - Cafés[/url]



...title...
...date...
...text...
[url=#]

Read more


[/url]

css :

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

    *, *:before, *:after {
margin:0;
padding:0;
border:0;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
*:before, *:after {content:""}
div {position:relative;display:block}
article {
display:flex;
width:100%;
max-width:1440px;
margin:0 auto 150px;
padding:0 80px;
-moz-box-pack: center;
-webkit-box-pack: center;
justify-content: center;
-moz-box-align: center;
-webkit-box-align: center;
align-items: center;}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows:1fr;
grid-column-gap:80px;
grid-row-gap:16px;
width:100%;
}
.left {grid-area: 1 / 1 / 2 / 2;justify-self:start}
.right {grid-area: 1 / 2 / 2 / 3;justify-self:end}
.list-txt {width:100%;max-width:550px;text-align:left;align-self:center;z-index:1}

.tags {display:block;margin:0 auto 10px;z-index:0}
.num {
position:absolute;
left:-100px;
bottom:-40px;
color:#f1eee9;
font-size:200px;
line-height:150px;
font-weight:700;
opacity:0.7;
pointer-events:none;
z-index:1;
}
.tagline {
display:inline-block;
width:72px;
height:2px;
margin-right:24px;
vertical-align:middle;
background-color:#e1aa58;
z-index:2;
}
.frame-circle {
display:inline-block;
vertical-align:middle;
aspect-ratio:1/1;
padding:0 20px;
border:1px solid #e1aa58;
border-radius:50%;
}
.tags .frame-circle {background:#e1aa58}
.taglinks {top:50%;left:50%;transform:translate(-50%, -50%)}
.tags a {display:block;color:#fff;font-size:11px;text-transform:uppercase;}
.tags a:hover {color:#fbd784;}
.date {
position:relative;
display:block;
margin-bottom:20px;
color:#ccc;
font-size:12px;
text-transform:uppercase;
}
.list-txt p {margin-bottom:30px;}
.more {
position:relative;
display:inline-block;
left:calc(100% - 202px);
right:0;
color:#e1aa58;
font-size:11px;
text-transform:uppercase;
}
.more:hover {color:#fbd784;}
.more div {display:inline-block;vertical-align:middle;}
.more-txt {top:50%;left:50%;transform:translate(-50%, -50%)}
.more .tagline {margin-left:24px;margin-right:0}

Вы можете найти мою скрипку здесь: https://jsfiddle.net/igorlaszlo/o6spxuq1/
родительский div (.frame-rixle) отображается в центре. Верх: 50%, слева: 50%, и трансформируется с помощью Translate (-50%, -50%).
Во втором. Frame-Circle, его ребенок,. More-txt встроен в линейном Safari с тех пор, как давно, так как я больше не могу установить новые версии в Windows.
У вас есть идея, какой Safari не поддерживает? < /P>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -on-safari