It’s the first time I’ve come across this issue and I’m wondering if others have as well?
While cross-browser testing a website I’ve been working on I noticed that background-images I’ve applied to buttons were blurred. Fine in other browsers and in IE8/9 for example. It looks how background-image’s appear on an iPhone look if you don’t specify retina images for @2x resolutions.
What’s strange is that if I remove border-radius: 4px from the object (which is an anchor/button. The images display as they should, nice and sharp. So it seems it’s rounding corners that causes the issue.
A very, very strange bug! I can’t seem to find a fix for this. Has anyone else encountered it?
It doesn’t seem as bad in CodePen but when I scale the width of the viewport the blurriness does appear – though it changes from icon to icon. So I’m guessing it’s also something to do with pixel rounding.
Removing the border-radius does resolve the issue though.
Viewing 3 posts - 1 through 3 (of 3 total)
The forum ‘CSS’ is closed to new topics and replies.