Safari perspective transform cuts off text

Question

So I am trying to add a perspective transform on an element but it is cutting off the text in Safari. If you open the following CodePen in Chrome it displays normally, but in Safari the white text is cut off. I have searched other questions but none seemed to solve my problem.

-webkit-transform: perspective(26.08696em) rotateX(-30deg);

http://codepen.io/anon/pen/aOaNNX

Answer 1

I was facing the same problem today. I fixed the problem setting a transform: translateZ(10px); property to the text that was being cut. Change the value to something that makes sense to you.

Answer 2

.field--name-residential-status {
  height: 70px;
  width: 100px;
  position: relative;
}

.property-status {
  display: inline-block;
  color: white;
  letter-spacing: 0.09375em;
  padding: 1.2em 2em;
  position: relative;
  z-index: 1000;
  padding-top: 1em;
  text-transform: uppercase; 
}

.property-status span {
  position: absolute;
  z-index: 5000;
  -webkit-transform: translateZ(5000px);
}

.field--name-residential-status:before {
  display: block;
  content: "";
  background-color: #2F2F2F;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2000;
  -webkit-transform: perspective(26.08696em) rotateX(-30deg);
  -moz-transform: perspective(26.08696em) rotateX(-30deg);
  -ms-transform: perspective(26.08696em) rotateX(-30deg);
  -o-transform: perspective(26.08696em) rotateX(-30deg);
  transform: perspective(26.08696em) rotateX(-30deg);
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%; 

}