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 Firefox, but it's still noticeable on Chrome/Safari.

The offender:

.title {
  position: absolute;
  border: 0 none;
  border-radius: 10px;
  width: 375px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
}

I've tried setting border to 0 none, as you can see. Margin 0 does nothing, padding 0 does nothing (worth a shot), changing to a 1:1 ratio only makes it worse.

Removing the alpha makes it go away, but that's throwing the baby away with the bathwater.

Anyone know what the deal is?

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.

Answer 2

You can make three shadows as your shadow... One of them is your main shadow, you have to put it after two transparent shadows and adjust the two transparent shadows as you want. :))

 #spsh{ background-color:cyan; width:150px; height:100px; box-shadow:6px 6px 7px white , -6px 6px 7px white , 0px 20px 19px cyan; }

 <div id="spsh"></div>