Webkit box-shadow gitches on top of the other elements?

I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? Related to forcing a repaint of elements using javascript.

So I updated my fiddle with this code to force a repaint of the elements with box shadows.

Up vote 0 down vote favorite share g+ share fb share tw.

I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements.

It works fine in Firefox. I made a jsfiddle portraying the issue as simply as I could figure out how to: jsfiddle.net/Q39eJ/1/ Hover over and then out of the first one or 2 elements and you'll see the issue in action. The site I'm working on has the issue here: temp.go-for-english.com/ (URL will soon change to go-for-english.com if this one doesn't work) If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :( UPDATE: I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:

Google-chrome safari webkit box-shadow css-transforms link|improve this question edited Jan 19 at 20:36 asked Jan 19 at 20:18nzifnab2,414416 88% accept rate.

I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? Related to forcing a repaint of elements using javascript.

So I updated my fiddle with this code to force a repaint of the elements with box shadows: $(function() { $('. Top-nav a'). Hover(function() { redrawMe($('.

Top-nav a')); }) }); function redrawMe(obj) { obj.hide(); obj. Each(function() { this. OffsetHeight; }); obj.show(); } I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them.

Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. Jsfiddle with my proof of concept: http://jsfiddle.net/nzifnab/Q39eJ/4/ Haven't updated that live site with it yet, but shall soon.

If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :) Again, this may only be happening on MacOS X in both chrome, and safari.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.