cssトランスフォームとサファリでスキューが発生しない

Question

私は、Webkit変換の回転とスキューを使用して六角形のグリッドを作成しようとしています。それは私のラップトップ上のクロムでうまくいくが、サファリや私の携帯電話のクロムアプリを使ってサイトを見るとうまくいきません。ここで

は、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>

と試みるが、それは私のコンピュータ上のChromeで次のようになります。

、ここでそれがです私のコンピュータのサファリ：

私は答えを広範囲に見てきましたが、私が見つけたすべてのものはうまくいきませんでした。どんな助けでも大歓迎です!!

Answer 1

positionのプロパティをrelativeに変更するか、overflow: hiddenの要素の静的以外に変更してみてください。