Blurry Buttons on Retina Displays

Question

Этот вопрос касается шаблона бесплатного сайта, который я строю, который вы можете demo here и see the code for here.

Я понял, что кнопки, созданные мной на сайте, становятся довольно размытыми на экране сетчатки. Кнопки - это единственные вещи, которые это делают. Вот код, я использую для создания кнопок:

<a class="btn" href="#">Get Started →</a> 

и

.btn { 
display: inline-block; 
padding: 15px 20px; 
color: white; 
margin: 5px 0 0 0; 
font-family: @font-family-sans-serif; 
line-height: @line-height-base; 
text-align: center; 
font-weight: 400; 
text-decoration: none; 
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); 
background: #79a94b; 
vertical-align: middle; 
cursor: pointer; 
border: 2px solid #689240; 
border-radius: 5px; 
white-space: nowrap; 
-webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); 
-moz-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); 
-ms-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); 
-o-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); 
filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); 
} 

с некоторыми более CSS для цветового перехода.

Похоже, что такой подход не должен делать вещи более размытыми на экране сетчатки - нет растрового изображения, чтобы размыться, это все CSS. Поэтому я не понимаю, что делать.

Answer 1

Это ошибка в WebKit. Его можно исправить добавлением backface-visibility: hidden;. Вы, конечно же, захотите от поставщика префикса, так что добавьте:

-webkit-backface-visibility: hidden; 
backface-visibility: hidden;