Safari perspective transform cuts off text -

so trying add perspective transform on element cutting off text in safari. if open following codepen in chrome displays normally, in safari white text cut off. have searched other questions none seemed solve problem.

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

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

.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%;   }