按钮变换比例闪烁

我有一个简单的按钮，当用户将鼠标悬停在上面时，我想要按比例增加10％。我试图通过使用css3“transform：scale（1.1）;”再加上“过渡：所有.3的缓和”;按钮变换比例闪烁

它缩放按钮，但也导致文本在过程中闪烁。我在Chrome，FF和IE中测试过它 - 都有同样的问题。

CSS：

a { 
    display: inline-block; 
    padding: 30px; 
    margin-top: 10%; 
    margin-left: 15%; 
    font-size: 20px; 
    color: #fff; 
    background-color: #000; 
    text-decoration: none; 
    transition: all .3s ease-in-out; 
} 

a:hover { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
}

例子：https://jsfiddle.net/Lfwnejkc/1/

我试图找到一个解决方案，并最终设法通过增加来解决它在Chrome “背面能见度：隐藏;”到按钮。文本现在比较模糊，但那没关系。不幸的是，对于FF和IE来说，这不起作用，按钮内的文本在扩展时仍然闪烁。

a { 
    display: inline-block; 
    padding: 30px; 
    margin-top: 10%; 
    margin-left: 15%; 
    font-size: 20px; 
    color: #fff; 
    background-color: #000; 
    text-decoration: none; 
    transition: all .3s ease-in-out; 
    backface-visibility: hidden; 
} 

a:hover { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
}

例子：https://jsfiddle.net/Lfwnejkc/2/

我昨天花了半天周围的Googling并试图修复它。不幸的是到目前为止我还没有成功。

有没有人遇到过这样的问题，最好的解决方法是什么？

来源

2016-02-13 ragga

它不能被固定。你可以说这是所有浏览器的错误。 –

尝试添加'-webkit-backface-visibility：hidden;'到'a'元素，这不是一个完美的解决方案，最后文本看起来不太好，但防止闪烁。 – Sirikon

并不完美，但不知何故更好，是将移动元素在Z平面，并获得变焦效果的角度来看，结果

a { 
 
    display: inline-block; 
 
    padding: 30px; 
 
    margin-top: 10%; 
 
    margin-left: 15%; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    background-color: #000; 
 
    text-decoration: none; 
 
    transition: all 1s ease-in-out; 
 
    transform: perspective(1000px) translateZ(0px); 
 
} 
 

 
a:hover { 
 
    transform: perspective(1000px) translateZ(300px); 
 
}

<a href="#">BUTTON</a>

来源

2016-02-13 18:05:51 vals

按钮变换比例闪烁

回答

相关问题