spacing between quadrants of box-shadow in IE8

[bobeagan]

Here is the box-shadow line in use:

box-shadow: 0 0 90px #000;

This works as expected in IE7 and IE9 but IE8 shows the following:

I have a different menu like that with a slightly different height which does not show the lines. The CSS for the element being styled are identical. I tried adjusting various elements within to determine what it was but could not isolate the problem. I was able to solve the problem by changing the blur of the box shadow. It seemed to affect the lines. Dropping it to 80px solves my problem for now but I figured it was still worth reporting in case it was an actual bug or if others had similar issue maybe pointers for where to look to correct this can be identified.

[lojjic]

Thanks for opening this.

Yeah this is a tricky one. Nice job figuring out it's related to blur radius -- PIE has to switch to using a quadrant approach when the blur radius exceeds half the box's smaller dimension. Otherwise it can use a single shape which doesn't have this issue.

IE8 is very finnicky with showing the gaps. It has to due with subpixel rounding internally in IE8's VML engine and I haven't found a reliable way yet to adjust for it that avoids the 1px gaps and doesn't result in the opposite problem, a 1px overlap.

I'm also looking at a possible alternate approach that avoids the need for the quadrants altogether.

[lojjic]

This is no longer an issue in latest master as of commit 9fcfa80 -- box-shadow rendering has been reworked so the quadrants are no longer necessary.