在其他元素上方的Webkit框阴影gitches [英] Webkit box-shadow gitches on top of the other elements
问题描述
我有一些导航元素放置在 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:
将鼠标悬停在第一个或第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.com/
（URL很快将更改为 http://www.go-for-english.com （如果此方法无效）
(URL will soon change to http://www.go-for-english.com 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:
我的客户也指出了这个问题，因为他们使用的是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.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 :)
同样，这可能仅在Chrome和Safari的MacOS X上发生。
Again, this may only be happening on MacOS X in both chrome, and safari.
这篇关于在其他元素上方的Webkit框阴影gitches的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
