Question

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:

http://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:

http://temp.go-for-english.com/

(URL will soon change to http://www.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:

http://s9.photobucket.com/albums/a74/nZifnab/?action=view&current=Screenshot2012-01-19at13205PM.png

My client has also pointed out the issue because they use Safari.

Answer 1

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.