Skip to content
This repository

spacing between quadrants of box-shadow in IE8 #172

Closed
bobeagan opened this Issue October 28, 2011 · 2 comments

2 participants

Bob Eagan Jason Johnston
Bob Eagan

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:

screenshot

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.

Jason Johnston
Owner

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.

Jason Johnston
Owner

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.

Jason Johnston lojjic closed this November 13, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.