6

CSS3を使用して、背景画像をカバーとして設定しました。最初にChromeにページを読み込んでリンクにカーソルを合わせると、テキストの周囲の背景がわずかにシフトします（ただし、かなり目立ちます）。ホバーにトランジションを使用していますが、トランジションを削除するとバックグラウンドシフトも発生します。

ホバー中に背景のサイズが変更されていると思いますが、これを防ぐ方法がわかりません。シフトしたら、他のリンクを問題なくロールオーバーできます。ページを更新した後も、問題は解決しません。

ウェブサイトはこちら：http ：//tylerbritt.com/

スタイリングはそれ自体です：

body{
    text-align: center;
    margin: 0 auto;
    color: white;
    font: bold 80pt 'Economica', sans-serif;

    background: url(bg2.jpg) no-repeat  center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

a {
    color: white;
    text-decoration: none;
    -webkit-transition: text-shadow 0.3s ease-out;
    -moz-transition: text-shadow 0.3s ease-out;
    -o-transition: text-shadow 0.3s ease-out;
    -ms-transition: text-shadow 0.3s ease-out;
    transition: text-shadow 0.3s ease-out;
}

  a:hover { 
        text-shadow: 0 0 6px #1c00f6;
    }

私の問題は次のようなものです。ホバー時に不透明度が変わると、GoogleChromeの背景がシフトします。jfriend00のアドバイスは役に立ちましたが、これは純粋にテキストリンクであり、imgではないため、私の問題は異なります。

Chromeバージョン19.0.1084.52を使用しています。問題は存在しませんSafariです。アドバイスをいただければ幸いです。

4

2 に答える 2

3

ねえ、私はまったく同じ問題に気づきました。間違いなくクロームのもの。以下は、私がクロムプロジェクトに提出した問題です。

Chrome Version       : 21.0.1180.89
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
URLs (if applicable): http://jsfiddle.net/9vvy6/62/
                      http://castlelaw-kc.fosterwebmarketing.com/
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 5/6:OK
  Firefox 14.0.1:OK
     IE 9:OK
     Chrome:FAIL

問題を再現する手順は何ですか？

  1. background-size：coverの背景画像
  2. ホバー効果のあるオーバーレイ要素（divとタグでテスト済み）
  3. 最良の結果を得るには、bg画像が大きく引き伸ばされ、アブバレーションが最もはっきりしている大きなビューポートで使用します。

期待される結果は何ですか？

ホバー効果（下線、マージンの変更など）をアクティブ化する場合、背景画像は一貫性を保つ必要があります（これまでにテストされた他のすべてのブラウザーでも同様です）。

代わりに何が起こりますか？

マウスでホバー効果を有効にすると、背景画像が奇妙に歪んでしまいます。要素の周囲の領域では、bg画像が数ピクセルずれています。

以下に追加情報を入力してください。可能であればスクリーンショットを添付してください。

上記のリンク先のJSFiddleでは、例としてul/liを使用しています。ulの表示をインラインブロックに変更すると問題が修正されたと判断しました。

重要：非常に微妙なので、気付く前に、関連する要素全体でマウスを数回スイープする必要がある場合があります

UserAgentString：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.1（KHTML、Geckoなど）Chrome / 21.0.1180.89 Safari / 537.1

于 2012-09-18T14:09:09.760 に答える