在其他元素上方的Webkit框阴影gitches

本文介绍了在其他元素上方的Webkit框阴影gitches的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一些导航元素放置在 transform上：rotate（）和 box-shadow 。当您将其悬停时，它们会弹出一点，表明您可以单击它们。在Chrome和Safari（表明这是一个Webkit问题）中，当您将某些导航项悬停时，框阴影变得混乱，掩盖了其他随机元素的一部分。

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.

我做了一个jsfiddle来描述这个问题，就像我想出了怎么做一样简单：

I made a jsfiddle portraying the issue as simply as I could figure out how to:

jsfiddle/Q39eJ/1/

将鼠标悬停在第一个或第2个元素上，然后您会看到问题所在。

Hover over and then out of the first one or 2 elements and you'll see the issue in action.

我所在的网站

http： //temp.go-for-english/

（URL很快将更改为 www.go-for-english （如果此方法无效）

(URL will soon change to www.go-for-english if this one doesn't work)

如果有人能找出仍可使用CSS3使其正常显示的变通方法（也许在悬停窗口上再次设置z-index，或我不确定的其他怪异变通方法），我将不胜感激它:)我真的不愿意使用图像：（

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 :(

更新：

我去过一世通知它在Windows Chrome上看起来不错= \我正在使用Mac OSX 10.6，这是我看到的行为的屏幕截图：

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:

s9.photobucket/albums/a74/nZifnab/ ？action = view& current = Screenshot2012-01-19at13205PM.png

我的客户也指出了这个问题，因为他们使用的是Safari。

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

推荐答案

我想出了一些主要有效的解决方法。找到了这个stackoverflow问题：我如何强制WebKit重绘/重画以传播样式更改？与使用javascript强制重画元素有关。因此，我用以下代码更新了小提琴，以强制重绘带有框阴影的元素：

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(); }

我只尝试重画悬停的元素 redrawMe（$（this））; ，但是没有用，当它们中的任何一个悬停时，我都需要重新绘制它们。看来主要是解决问题的方法，但每个元素之间的裂缝中仍出现一些较暗的阴影。我认为这是可以接受的，几乎没有引起注意。 jsfiddle，并附带我的概念证明：

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

同样，这可能仅在Chrome和Safari的MacOS X上发生。

Again, this may only be happening on MacOS X in both chrome, and safari.