web-dev-qa-db-ja.com

ホバー時に画像が移動する-chrome不透明度の問題

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

サムネイルにカーソルを合わせると、画像が少し右側に移動し、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;
}
cssimagegoogle-chromehoveropacity
90
zefs

別の解決策は

-webkit-backface-visibility: hidden;

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

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

230
alpipego

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

33
Rick Giner

同じ問題がありましたが、css transform rotateで修正しました。このような：

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

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

21
Beskow

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

will-change: opacity;

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

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

とはいえ、 ブラウザサポート はwill-changeにはあまり良くないことに注意してください（ただし、問題がChromeにある場合のみ、これは良いかもしれませんもの！）、そして状況によっては それ自体の問題 を導入する可能性がありますが、それでもこの問題の別の可能な解決策です。

14
Nick F

ホバーの（不透明ではない）フィルターにも同様の問題がありました。以下を使用して基本クラスにルールを追加することで修正されました。

filter: brightness(1.01);
10
Juan Casares

この不具合を防ぐには、backface-visibilityとtransformの両方のルールを適用する必要がありました。このような：

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}
10
Jamland

Safari 8.0.2でも同様の問題が発生し、不透明度が変化すると画像が揺れることがありました。ここに投稿された修正はいずれも機能しませんでしたが、次のように機能しました。

-webkit-transform: translateZ(0);

この回答 経由のすべてのクレジット この後続の回答

5
James Fletcher

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
}
5
andersra

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

私が見つけた最も怠solutionな解決策は、1に非常に近いが、まったくではない1の要素に不透明度を設定することです。これは、不透明度が1の場合にのみ問題です。

opacity:0.99999999;
2
Josh from Qaribou

私はこの問題に遭遇しました。グリッド内の画像で、各画像がネストされたディスプレイにあります。インラインブロックが宣言されています。 Jamlandが上記に投稿したソリューションは、ディスプレイのインラインブロックの問題を修正するために機能しました。親要素で宣言されました。

画像が順不同リストにある別のグリッドがあり、表示を宣言することができました：ブロック;および親リスト項目の幅と宣言されたbackface-visibility：hidden;画像要素上で、ホバー時に位置のずれはないようです。

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }
2
user2125009

ソリューション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;
2
Lenin Zapata

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

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

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

1
sidonaldson

CSSに不透明度が含まれていることに気付きました。 Chrome（ホバーで動いている画像）でも同じ問題がありました。.行ったのは不透明度を無効にすることだけで、解決されました。これ以上画像は動いていません。

.yourclass:hover {
  /* opacity: 0.6; */
}
0
cssninja

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

0
Beached As