css变换旋转和倾斜在safari中不起作用

Question

我正在尝试使用webkit-transform中的旋转和倾斜来制作六边形网格。它在我的笔记本电脑上的Chrome效果很好，但它在Safari中不起作用，或者当我使用手机上的chrome应用程序查看网站时。

这是css和Html尝试使用代码段

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

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

这是我计算机上chrome的样子：

这里是我的电脑上的safari：

我在这里广泛地寻找答案，但我发现的所有事情都没有用。任何帮助将不胜感激!!

Answer 1

尝试将position属性更改为relative或使用overflow: hidden将元素更改为静态。