* css變換期間模糊文本* Chrome

您好，我一直在與此戰鬥一段時間。我有一個按鈕（即使是內部帶有文本的div也會發生），我只是稍微轉換一下。在轉換過程中，文本顯示模糊，然後回到焦點。有沒有辦法讓文本保持相同的大小？或者在變換過程中渲染它？* css變換期間模糊文本* Chrome

我試過rotate(0.02deg)，如下所示。也試過-webkit-transform: translateZ(0px) AND -webkit-backface-visibility: hidden沒有一個能讓我在Chrome中獲得平滑的文本轉換。

.smooth-pop:hover { 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:scale(1.1) rotate(0.02deg);  
    transform: scale(1.1) rotate(0.02deg);   
}

查看下面的代碼片段可以瞭解發生了什麼。這也包含了我所有的CSS功能。在IE中似乎沒問題。

.smooth-pop { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    /*-webkit-font-smoothing: antialiased;*/ 
 
} 
 
.smooth-pop::after { 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, .20); 
 
    content: ""; 
 
    border-radius: 4px; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
 
} 
 
.smooth-pop:hover { 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: scale(1.1) rotate(0.02deg); 
 
    transform: scale(1.1) rotate(0.02deg); 
 
    /*-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .20);*/ 
 
} 
 
.smooth-pop:hover::after { 
 
    opacity: 1; 
 
}

<div class="smooth-pop" style="width:50px; height:50px; border:1px solid black"> 
 
    test 
 
</div>

來源

2016-10-12 ganjeii

這是由於使用CSS變換屬性。使用它模糊的元素更好的過渡，我建議變換你的寬度和高度框，而不是使用transform屬性。

來源

2016-10-12 13:17:30

嗨迪倫，感謝您的建議，但它沒有提供所需的效果，它不會在過渡期間彈出，當我在高度/寬度上使用過渡時，它會滑出和滑下。再次，這是工作在IE – ganjeii

我剛剛在IE瀏覽器上測試它，它仍然在IE瀏覽器上變得模糊所以... –

是的，但是這是不同的，如果你看它在鉻它結束「彈出」在IE中它仍然是一個平穩的過渡。 – ganjeii

* css變換期間模糊文本* Chrome

回答

相關問題