CSS Transition White Flash

Question

Все, что я пытаюсь сделать, это переход к более яркому оттенку (с использованием непрозрачности) с использованием CSS, и я уже попытался увидеть видимость -webkit-backface: скрытый трюк, и это не сработало. Мигает белым над наведением, и это заводит меня орехами !!

http://jsfiddle.net/eb3Lp0s0/

CSS

.button { 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:25px; 
    display:block; 
    border-top: 1px solid #96d1f8; 
    background: #0083d4; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4)); 
    background: -webkit-linear-gradient(top, #0099ff, #0083d4); 
    background: -moz-linear-gradient(top, #0099ff, #0083d4); 
    background: -ms-linear-gradient(top, #0099ff, #0083d4); 
    background: -o-linear-gradient(top, #0099ff, #0083d4); 
    padding: 5px 10px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; 
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; 
    box-shadow: rgba(0,0,0,1) 0 1px 0; 
    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
    color:#272727; 
    font-size: 18px; 
    font-family: 'Century Gothic', Helvetica, Arial, Sans-Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    text-transform:uppercase; 
    opacity: 1; 
    transition: all 0.3s ease 0s; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden; 
-o-backface-visibility: hidden; 

    } 
.button:hover { 
    border-top-color: #28597a; 
    background: #28597a; 
    color: #ccc; 
    opacity: 0.75; 
    -webkit-backface-visibility: hidden; 

    } 
.button:active { 
    border-top-color: #1b435e; 
    background: #1b435e; 
    -webkit-backface-visibility: hidden; 

HTML

<button type="button" onclick="location.href='http://webwavebuilding.com/whatwedo.html'" class="button">Learn more</button> 

Answer 1

Использование background-color на :hover, а не только background:

.button:hover { 
    border-top-color: #28597a; 
    background-color: #28597a; /* <<< Here */ 
    color: #ccc; 
    opacity: 0.75; 
    -webkit-backface-visibility: hidden; 
} 

http://jsfiddle.net/eb3Lp0s0/1/

Обычно, если вы хотите установить только background-color конкретно не используют сокращенную background, использовать определенное свойство.

Другой способ исправить это установить градиент background-color в .button классе:

.button { 
    background-color: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4)); 
    background-color: -webkit-linear-gradient(top, #0099ff, #0083d4); 
} 

http://jsfiddle.net/eb3Lp0s0/2/

Или добавить цвет в сочетании background:

background: #0083d4 -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4)); 
background: #0083d4 -webkit-linear-gradient(top, #0099ff, #0083d4); 

http://jsfiddle.net/eb3Lp0s0/3/

Который, я думаю, указывает на то, что здесь происходит: Использование background: для градиента сбрасывает всего background- набор значений, включая неявный background-color. Поэтому, даже если вы установили это прямо перед тем, как вы назовете строки background: -webkit-gradient(), эти две строки на самом деле удаляют (путем сброса) неявный background-color, который затем становится background-color: transparent;. Отсюда вспышка.