Small space between box shadow and div when alpha set

Question

Fiddle here: http://jsfiddle.net/17zyydx1/

There\'s a gap on the left and right sides of the div, between the div and the box shadow.

It\'s most obvious on F

Answer 1

It appears to be a rendering issue with an anti-aliasing effect on the physical edge of the div. If you change the div to an even number of pixels wide, it goes away on the vertical sides, but you can still see this on the corners because of the border-radius. The drop-shadow must be rendered at a different time (most likely after) then added into the page. With IE it seems to be worse as it 'walks' as the page is resized. I don't think this can be fixed, but you can minimise the issue with a div that is an even number of pixels wide.