Fix border radius blur of background image in Edge?

Question

When using border-radius on an element with background image in Edge the image becomes blurred. Here is the exact same fiddle in Chrome (left column) and Edge (right).

I've also notices that the browser width plays a role in the amount of blur the image gets. When I resized the browser by a few pixels I got even more blur. Edge (left) vs Chrome (right)

Even though the blur is only slight it becoms even more visible on when the image has lower quality. Chrome (left) vs Edge (right)

Is there any way to prevent the image from being blurred?

div:first-child{
  border-radius: 10px;
}
div{
  box-sizing: border-box;
  background-image: url('https://puu.sh/sEUpF/c8fa8f198b.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  border: 1px solid red;
  width: 30px;
  height: 30px;
  background-color: #fff;
}
div + div{
  margin-top: 10px;
}

<div>

</div>
<div>

</div>

elmarko · Answer 1 · 2016-12-05T12:35:03.720

0

I notice that your png source image has dimensions of 24x24px but is being displayed by the browser at 15x18px. I'd take a punt that the browsers in-built image rendering is causing the blur as it attempts to scale the image down to fit the new scale and Edge can't compete with Chrome in this respect.

Try altering your background-image to the exact display dimensions and see if you still get blurring then.

Edit

This seems to be an Edge issue with border-radius. A nice suggestion would be to use CSS' Image-rendering property but that doesn't work for Edge (https://css-tricks.com/almanac/properties/i/image-rendering/).

I'd work around it by creating an :after pseudo element to house your icon image and position that inside your container element. Because in a container without border-radius you aren't seeing the unwanted blur

edited Dec 05 '16 at 12:35

answered Dec 05 '16 at 12:10

elmarko

813
7
17

I've added background-size: 24px 24px but it still blurrs. https://puu.sh/sEVpe/0c658e448a.png – Cream Whipped Airplane Dec 05 '16 at 12:16
Ended up using the pseudo element. I thought of that as well but didn't want to mess with clients css classes.. Is the bug official reported anywhere do you think it will every be resolved natively? – Cream Whipped Airplane Dec 05 '16 at 15:44
Seems to have been around since IE11 so I wouldn't cross my fingers for a fix! http://stackoverflow.com/questions/20723057/ie11-making-background-image-text-blurry – elmarko Dec 05 '16 at 16:11

Fix border radius blur of background image in Edge?

1 Answers1