他の要素の上にあるWebkitのボックスシャドーグリッチ

Question

私は、transform: rotate()とbox-shadowで配置されたいくつかのnav要素を持っています。あなたがそれらを動かすと、あなたはそれらをクリックできることを示すために少し飛び出します。 ChromeとSafari（これはWebkitの問題です）では、ナビゲーション項目の一部をホバーすると、ボックスの影が絡み合って他のランダム要素の一部を覆い隠します。それはFirefoxで正常に動作します。私が把握できたとして

は、私は単に問題を描いjsfiddleを作った方法：

http://jsfiddle.net/Q39eJ/1/

ホバーオーバーしてから最初の1つのまたは2の要素のうち、あなたが問題でが表示されますアクション。誰もが把握できる場合

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

（この1つは動作しない場合は、URLがすぐにhttp://www.go-for-english.comに変更されます）

：

私が働いているサイトはここに問題がありますそれはまだCSS3を使って正常に見えるようにしています（私はよくわからないホバーや別の奇妙な回避策を再び設定するかもしれません）画像に頼らない:(

UPDATE：

私はそれが= \私は、Mac OSX 10.6を使用しているWindowsのChromeで正常に見える知らされてきた、ここで私が見る行動のスクリーンショットです：

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

私のクライアントもあり彼らはSafariを使用しているので、問題を指摘した。

Answer 1

のほとんどがのような回避策を見つけました。このスタックオーバーフローの質問：How can I force WebKit to redraw/repaint to propagate style changes?は、javascriptを使用して要素の再描画を強制することに関連しています。だから私は、ボックスシャドウを持つ要素の再描画を強制するために、このコードで私のバイオリンを更新：それらのいずれかを推移取得したときに、

$(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：

http://jsfiddle.net/nzifnab/Q39eJ/4/

はまだそれをそのライブサイトを更新しましたが、すぐにはならなかったの。

、誰もがそれぞれの要素の間にも影は私が代わりにあなたの答えを受け入れるだろう:)

を再び消えるようにする方法を見つけるために管理することができる場合、これが唯一の両方のクロームでのMacOS X上で起こって、そしてサファリすることができます。