0

と で配置されたいくつかのナビゲーション要素がtransform: rotate()ありbox-shadowます。それらにカーソルを合わせると、それらをクリックできることを示すために少し「ポップアウト」します。Chrome と Safari (これは Webkit の問題であることを示しています) では、いくつかのナビゲーション項目にカーソルを合わせると、ボックスの影が乱れ、他のランダムな要素の一部を覆い隠します。Firefox では問題なく動作します。

私は、次の方法を理解できるのと同じくらい簡単に問題を描写するjsfiddleを作成しました。

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

最初の 1 つまたは 2 つの要素にカーソルを合わせて外に出すと、実際の問題が表示されます。

私が取り組んでいるサイトには、次の問題があります。

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

(この URL が機能しない場合、URL はすぐにhttp://www.go-for-english.comに変更されます)

CSS3を使用して正常に見えるようにする回避策を誰かが見つけられる場合(ホバーでz-indexを再度設定するか、私にはよくわからない他の奇妙な回避策があるかもしれません)、私はそれを大いに感謝します: )私は本当に画像に頼りたくありません:(

アップデート：

Windows Chrome では問題なく表示されるとのことでした =\ Mac OSX 10.6 を使用しています。動作のスクリーンショットを次に示します。

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

クライアントも Safari を使用しているため、この問題を指摘しています。

4

1 に答える 1

3

私は、ほとんどがうまくいくちょっとした回避策を見つけました。このスタックオーバーフローの質問を見つけました: WebKit に強制的に再描画/再描画してスタイルの変更を反映させるにはどうすればよいですか? 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/

そのライブサイトはまだ更新していませんが、すぐに更新する予定です。

誰かが各要素間の影さえも消す方法を見つけることができれば、代わりにあなたの答えを受け入れます:)

繰り返しますが、これは Chrome と Safari の両方で MacOS X でのみ発生する可能性があります。

于 2012-01-20T21:43:07.347 に答える