Re: Trouble Rendering Circle Overlays in Chrome and Safari

[Atelierbram]

@DesignLady94 : please don’t be sorry …; I’m doing this also for my own curiosity in this matter, ( something I’m eager to find an excuse for using oneday ) so congratulations, and maybe you can call this question solved! What I think of you’re homepage is that it looks good, and I mean that, but that ( parts of ) the underlying css are still vulnerable. By making this codepen I experienced how tricky this issue really is. One thing, which is odd and hard to explain, but what can be improved in you’re code is the `.thumbnail .overlayer .overlay` : ( ’cause of the padding ) the circles are just a tiny bit oval, so by compensating this in the height for this element, you will have a better fit. You can check this by temporarily disabling the `clip` property in Firebug or developer-tools:

.thumbnail .overlayer .overlay {
background-color: rgba(0,0,0,0.7);
z-index: 99;
border-radius: 50%;
width: 290px!important;
height: 303px !important;
clip: rect(194px, 290px, 303px, 0);
}

Also noticed that, by disabling the border on the `.thumbnail a` , the layout breaks on hover; that can be a sign that the css is still not [bulletproof](http://simplebits.com/publications/bulletproof/) . And I don’t understand this `jQuery.thumbFX.css` file that you include, which says .css, but is really html. So good luck with optimizing: that’s the trouble with using other’s frameworks, plugins ( no matter how solid it is ) : there’s always some ‘dead wood’ to get rid of!