94

ここの私のページに問題があるようです： http ：//www.lonewulf.eu

サムネイルにカーソルを合わせると、画像が少し右に移動します。これはChromeでのみ発生します。

私のcss：

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}
4

14 に答える 14

231

別の解決策は、を使用することです

-webkit-backface-visibility: hidden;

不透明度のあるホバー要素上。Backface -visibilityはに関連してtransformいるので、@Beskowはそれと関係があります。これはWebkit固有の問題であるため、Webkitの背面の可視性を指定するだけで済みます。他のベンダープレフィックスがあります。

詳細については、 http：//css-tricks.com/almanac/properties/b/backface-visibility/を参照してください。

于 2013-05-30T10:15:49.880 に答える
34

何らかの理由で、Chromeは不透明度1のない要素の位置を別の方法で解釈します。CSS属性position:relativeをa.img要素に適用すると、不透明度が変化するため、左右の動きがなくなります。

于 2012-10-21T04:52:25.587 に答える
21

同じ問題が発生しました。csstransformrotateで修正しました。このような：

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

主要なブラウザで正常に動作します。

于 2013-03-08T15:43:08.987 に答える
15

この問題を修正した別の解決策は、ルールを追加することでした。

will-change: opacity;

translateZ(0)私の特定のケースでは、これにより、 Chromeで修正されたにもかかわらず、InternetExplorerで発生した同様のピクセルジャンプの問題が回避されました。

translateZ(0)ここで提案されている変換（ 、、、rotate(0)など）を含む他のソリューションのほとんどはtranslate3d(0px,0px,0px)、要素のペイントをGPUに渡すことで機能し、より効率的なレンダリングを可能にします。will-changeおそらく同様の効果（ブラウザーがより効率的に遷移をレンダリングできるようにする）をブラウザーに提供しますが、ハッキーではないように感じます（ブラウザーにGPUを使用するように指示するのではなく、問題に明示的に対処しているため）。

そうは言っても、ブラウザのサポートはそれほど良くないことを覚えておく価値がwill-changeあります（ただし、問題がChromeのみにある場合、これは良いことかもしれません！）、場合によっては、それ自体の問題が発生する可能性がありますが、それでも、これはこの問題に対する別の可能な解決策です。

于 2016-11-08T17:21:11.467 に答える
10

このグリッチを防ぐために、ルールbackface-visibilityとルールの両方を適用する必要がありました。transformこのような：

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}
于 2013-11-15T00:27:30.870 に答える
10

ホバーの（不透明でない）フィルターでも同様の問題が発生しました。基本クラスに次のルールを追加することで修正されました。

filter: brightness(1.01);
于 2015-09-18T00:45:50.773 に答える
6

backface-visibility（または-webkit-backface-visibility）は、Chromeの問題を修正しただけです。FirefoxとChromeの両方で修正するために、上記の回答を次のように組み合わせて使用​​しました。

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}
于 2014-07-15T14:24:42.637 に答える
4

Safari 8.0.2でも同様の問題が発生しました。この問題では、不透明度が変化するにつれて画像がジッターします。ここに投稿された修正はどれも機能しませんでしたが、次のように機能しました。

-webkit-transform: translateZ(0);

この後続の回答を介したこの回答へのすべてのクレジット

于 2015-01-21T19:50:25.087 に答える
2

グリッド内の画像でこの問題が発生しました。各画像は、display：inline-blockが宣言されたにネストされていました。Jamlandが上記で投稿した解決策は、次の場合に問題を修正するために機能しました。親要素で宣言されました。

画像が順序付けられていないリストにある別のグリッドがあり、display：block;を宣言することができました。親リストアイテムの幅と宣言されたbackface-visibility：hidden; 画像要素上にあり、ホバー時に位置シフトがないようです。

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }
于 2014-01-26T23:07:13.850 に答える
2

解決策alpipegoはこの問題で私に役立った。これを使用する-webkit-backface-visibility: hidden; と、画像はホバー不透明度遷移で移動しません

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
于 2014-04-21T19:51:30.010 に答える
2

他のものを壊す可能性のあるCSSへの変更が必要なため、ここで他のすべてのソリューションに問題がありました-position：relativeでは、要素の配置方法を完全に再考する必要があります。transform：rotate（0）は既存のソリューションに干渉する可能性がありますトランジション期間が設定されていると、変換されて不安定な小さなトランジション効果が得られます。実際にバックフェイスが必要な場合（そして多くのプレフィックスが必要な場合）、バックフェイスの可視性は機能しません。

私が見つけた最も怠惰な解決策は、要素に不透明度を設定することです。これは、1に非常に近いですが、完全ではありません。これは、不透明度が1の場合にのみ問題になるため、他のスタイルを壊したり妨害したりすることはありません。

opacity:0.99999999;
于 2014-05-28T15:40:06.423 に答える
1

Rick Ginerの答えを正解としてマークしたところ、問題が解決しなかったことがわかりました。

私の場合、レスポンシブ幅の画像がmax-widthdiv内に含まれています。サイトの幅がその最大幅を超えると、画像はホバーで移動します（css変換を使用）。

私の場合の修正は、この場合、最大幅を3、3列の倍数に修正することでしたが、完全に修正されました。

于 2013-02-14T10:38:27.187 に答える
0

CSSに不透明度が含まれていることに気づきました。Chrome（画像がホバーで移動する）でもまったく同じ問題が発生しました。不透明度を無効にするだけで解決し、画像が移動しなくなりました。

.yourclass:hover {
  /* opacity: 0.6; */
}
于 2017-03-08T10:56:46.650 に答える
0

同じ問題がありましたが、私の修正では、imgタブのsrcの前にクラスを配置していました。

于 2018-05-17T00:28:00.577 に答える