Remove 1px transparent space from CSS box-shadow in IE11?

Question

I\'m using CSS box-shadow to mimic a background that \"bleeds\" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Exp

Answer 1

THE PROBLEM:

This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.

As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.

That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!

WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):

In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:

div {box-shadow: 10px 0px 0px 0px red, 
                 4px 0px 0px 0px red, 
                 3px 0px 0px 0px red, 
                 1px 0px 0px 0px red;}

Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?

Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.

THE "PRETTY MUCH" PART (FOR ME):

In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.

The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.

Not ideal, but far more preferable than having a whole line transparent.

I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.

Good luck, and let's all thank good ol' IE for its "challenges"!! ;)