This question concerns a free site template I'm building, which you can demo here and see the code for here.
I've realized that the buttons I created on the site get pretty blurry on a retina display. The buttons are the only things that do this. Here's the code I use to create buttons:
<a class="btn" href="#">Get Started →</a>
and
.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));
}
with some more CSS for the color transition.
It seems like this approach shouldn't make things more blurry on a retina display – there's no raster image to get blurry, it's all CSS. So I'm kind of at a loss for what to do.
This a bug in WebKit. It can be fixed by adding backface-visibility: hidden; You will, of course, want to vendor prefix this, so add:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;