Safari瀏覽器透視變換截斷文字

所以我試圖在元素上添加透視變換，但它正在切斷Safari中的文本。如果您在Chrome中打開以下CodePen，它會正常顯示，但在Safari中，白色文本會被截斷。我搜查了其他問題，但似乎沒有解決我的問題。Safari瀏覽器透視變換截斷文字

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

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

來源

2015-07-21 chap

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

}

來源

2015-10-06 15:44:14 user3547538

儘管此代碼可能會回答這個問題，但提供有關_how_和/或_why_的附加上下文可以解決問題，從而提高答案的長期價值。 –

我今天所面臨的同樣的問題。我解決了將transform: translateZ(10px);屬性設置爲正在剪切的文本的問題。將價值改變爲對您有意義的事情。

來源

2016-01-18 20:21:39 rafaelbiten

這只是如此超級怪異，但它也適用於相同的'規模'錯誤。 –

Safari瀏覽器透視變換截斷文字

回答

相關問題