I'm trying to create a, somewhat, blurred out circle but I get a strange
glitch.
I'm adding box-shadow in the same color as the circle itself but there
appears to be a void between the circle and shadow, so the background
leaks in, and becomes visible as a kind of... pixelated border. This
only happens in circles, not boxes.
The glitch is present in Firefox 16.0.1 and Opera 12.02. Chromium 24
(24.0.1284.2) fares much better, nearly perfect. But even in Chromium,
as you enlarge the text (I used em) you can start seeing the same glitch
taking place, albeit in a more gentle way.
My question is, can I prevent this glitch from happening?
This is the HTML file:
http://dl.dropbox.com/u/21665656/circle%2Bbox-blur.html
And these are screenshots from the three browsers-
-Chromium-
circle zoomed in
http://dl.dropbox.com/u/21665656/chromium-big-circle.png
box zoomed-in
http://dl.dropbox.com/u/21665656/chromium-big-box.png
both shapes 1:1
http://dl.dropbox.com/u/21665656/chromium-small.png
-Firefox-
circle zoomed in
http://dl.dropbox.com/u/21665656/firefox-big-circle.png
box zoomed-in
http://dl.dropbox.com/u/21665656/firefox-big-box.png
both shapes 1:1
http://dl.dropbox.com/u/21665656/firefox-small.png
-Opera-
circle zoomed-in
http://dl.dropbox.com/u/21665656/opera-big-circle.png
box zoomed-in
http://dl.dropbox.com/u/21665656/opera-big-box.png
both shapes 1:1
http://dl.dropbox.com/u/21665656/opera-small.png
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
