Непрозрачность кнопки, вызывающая смещение/размытие пикселей в Chrome

56
6

У меня есть простая кнопка:

<a class="button" href="#">Click Me</a>

со следующим CSS:

.button {
color: #FFF;
background: #0095CD;
cursor: pointer;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: verdana;
padding: 0.6em 0.8em;
}

.button:active {
opacity: 0.8;
}

Когда кнопка нажата, я вижу небольшое размытие/перемещение текста влево в Windows 8 Chrome (40.0.2214.111 м). Другой браузер Windows кажется ОК, кроме Opera, где я могу видеть тот же эффект, но не так ярко выражен.

Я еще не тестировал это на OS X Chrome.

Я добавил это как CodePen.

спросил(а) 2015-02-12T15:08:00+03:00 5 лет, 5 месяцев назад
1
Решение
56

Это происходит потому, что видимость по умолчанию видима. Вместо того, чтобы быть видимым, вы можете скрыть его. Добавьте этот стиль CSS и проверьте:

body{ -webkit-backface-visibility: hidden;}

ответил(а) 2015-02-12T15:20:00+03:00 5 лет, 5 месяцев назад
40

    .button:active {
opacity: 0.8;
-moz-opacity: 0.8;
-o-opacity: 0.8;
-webkit-opacity: 0.8;
-ms-opacity: 0.8;
}

ответил(а) 2015-02-12T15:10:00+03:00 5 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема