Take a look at the JSFIDDLE of my cat animation without any drop-shadows to highlight the issue clearly. The problem appears to be related to the use of border-radius and possibly due to overflow: hidden.
Just to clarify, the owl is not the focus of this question - it's merely an example of a similar situation I encountered in the past. The main query pertains to the jsfiddle/cat animation; apologies for any confusion.
Here's another JSFIDDLE showcasing my cat with an inset box shadow using the blur property of box-shadow. However, the pixelated edge remains unchanged around the eye.
The solution provided here addresses issues relating to an owl image but does not align with the specifics of this question.
This feline features an inset box-shadow with a third value indicating blur for the eyes.
I've run tests on this fiddle across Safari, Chrome, and Firefox, yielding consistent results.
I'm currently working on a Cheshire Cat CSS project with two eyes, initiated yesterday. While everything appears fine on that front, I also created an Owl out of CSS (initially believed to face a similar issue, which is not the case) exhibiting a minor yet comparable concern regarding pixelation around the eyes.
Even applying a purple-colored border to the eyes fails to resolve the persistent pixelation around the edges.
In my latest CSS endeavor, the external edge of the eyes shows significant pixelation bearing a resemblance to the color (yellow) of the parent circle.
Below are the CSS styles for the eyes.
.eye {
border-radius: 50%;
height: 100px;
width: 100px;
background: #FAD73F;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
display: inline-block;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
z-index: 100;
}
.pup {
border-radius: 50%;
height: 20px;
width: 20px;
background: #2b2b2b;
display: block;
position: absolute;
top: 40px;
left: 40px;
}
.lidT {
display: block;
width: 100px;
height: 100px;
background: #821067;
position: absolute;
top: -80px;
z-index: 20;
}
.lidB {
display: block;
width: 100px;
height: 100px;
background: #821067;
position: absolute;
bottom: -80px;
z-index: 20;
}
Check out the JSFIDDLE used to create this animation/creature.
A potential cause of the issue could be...
The problem might stem from the .lidT and .lidB classes nested within my .eye structure, causing a 1px trim around the eyelids, notably visible when attempting to animate blinking.
Using images as an alternative is feasible, but I prefer sticking to CSS creations for instructional purposes.
List of unhelpful styles
box-shadow
border
box-sizing
Not specific to Firefox only
End List
Updates
An interim solution involves adding an outer "eye socket" or primary tag surrounding the eye, concealing pixelation but serving as a workaround rather than a fix.
Refer to apaul34208's response for further insights.
However, one noticeable flaw in apaul34208's solution lies in the flattened appearance on the left and top sides of the eye, prompting speculation over whether the issue lies within browsers or CSS.
End Updates
Current best approach as of 11/13/2013
Applying a background gradient to the .eye element emerges as the most effective remedy thus far. Consult ScottS' answer for details.
This method is compatible with Firefox, Chrome, Safari, and even IE, although the result may vary slightly on IE compared to other browsers.
All contributions and guidance are highly valued!