CODEWITHSUNDEEP
htmlcsssafariwebkit
Christine Braun
Christine Braun

Reputation: 157

css transform rotate and skew not working in safari

I am trying to make a grid of hexagons using rotate and skew from webkit-transform. It works great in chrome on my laptop but it does not work in safari or when I look at the site using the chrome app on my phone.

Here is the css and Html try with the snippet

.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>

here is what it looks like in chrome on my computer: enter image description here

and here it is in safari on my computer: enter image description here

I have looked extensively on here for the answer but all the things I have found did not work. Any help would be much appreciated!!

Upvotes: 3

Views: 1535

Answers (1)

Imran Bughio
Imran Bughio

Reputation: 4941

Try changing position property to relative or any other than static on the element with overflow: hidden.

Upvotes: 1

Related Questions