css transform rotate and skew не работает в сафари

Question

Я пытаюсь создать сетку шестиугольников, используя поворот и перекос из webkit-transform. Он отлично работает в Chrome на моем ноутбуке, но он не работает в сафари или когда я смотрю на сайт, используя приложение Chrome на своем телефоне.

Вот CSS и Html попробовать с сниппета

.hexIn-1 { 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #252839; 
 
\t color: #ffffff; 
 
\t overflow: hidden; 
 
\t -webkit-transform: skew(0deg, -30deg) rotate(60deg); 
 
\t -ms-transform: skew(0deg, -30deg) rotate(60deg); 
 
\t -moz-transform: skew(0deg, -30deg) rotate(60deg); 
 
\t -o-transform: skew(0deg, -30deg) rotate(60deg); 
 
\t transform: skew(0deg, -30deg) rotate(60deg); 
 
\t -webkit-transition: all 0.35s ease-in; 
 
\t -ms-transition: all 0.35s ease-in; 
 
\t -moz-transition: all 0.35s ease-in; 
 
\t -o-transition: all 0.35s ease-in; 
 
\t transition: all 0.35s ease-in; 
 
\t -webkit-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
}

<a class="hexIn-1" href="/site/laefleif/about" target="_self"> 
 
    <h1> about </h1> 
 
</a>

вот что это выглядит как в хроме на моем компьютере:

и здесь в сафари на моем компьютере:

Я подробно рассмотрел здесь ответ, но все, что я нашел, не сработало. Любая помощь приветствуется!!

Answer 1

Попробуйте изменить свойство position на relative или любое другое, чем статическое на элементе, с overflow: hidden.