2

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

chap
  • 1,860
  • 5
  • 24
  • 39

2 Answers2

4

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.

rafaelbiten
  • 6,074
  • 2
  • 31
  • 36
-1
.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%; 

}
user3547538
  • 1
  • 3
    While this code may answer the question, providing additional context regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. – Rüdiger Herrmann Oct 06 '15 at 16:09