39

私が抱えているこの非常に苛立たしく奇妙なCSSの問題で、私は完全に髪の毛をすべて引き裂いています.

私はBones ボイラープレートを使用して Web サイトを作成していますが、これまでは素晴らしかったです...

流体グリッドシステムを使用しており、最近、グリッドにした単純なギャラリーを作成しようとしました (4 つの画像、それぞれが 4 分の 1 列にラップされ、最初/最後のクラスが最初/最後の画像に追加されます)。

画像にカーソルを合わせると (特に最初の 3 つはなんらかの理由で目立つ)、なんらかの理由で幅が 1 ～ 2 ピクセル変化していることに気付くでしょう。画像は に設定されており、画像に「固定」幅を指定すると (例、問題は修正されますが、流動的なグリッド システムであるため、それを下げることはできません)、max-width:100%これが何らかの原因であると感じています。.gallery-icon img {max-width:165px;}ブラウザーのサイズを変更しても画像は 165px のままであり、メディアに応じて 4 つの異なる幅を設定しても、メディア サイズの間に画像が正しく配置されないためです。

transition効果の問題がなければ（transitionオフにすると、画像はうまく低下しopacityますが、アニメーションはありません）、私が望むように機能します:(

みんな助けてください！

これは空のデモ サイトで、bone ボイラープレートが実行されており、ページにはギャラリーしかありません。揺れの問題があれば教えてください。

(jsfiddle では再作成できなかったので、あちこちに転がっていた古いドメインにインストールしました)

編集:幅と高さの両方で div よりも大きい画像で問題が発生しているように見えることに気付きました。画像 1 + 3 はこれでバグがありますが、画像 2,4 は問題ないようですか? 画像2 + 4の高​​さはdivよりも小さい.....しかし、画像を最大高さに設定しても問題は続きます..

EDIT2: 問題を示す簡単なビデオを追加しました (最新の Firefox および Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw

4

5 に答える 5

101

GPU の側面を指摘してくれた vals に感謝します... これにより、Chrome レンダリングの問題を解決する傾向があるこの CSS-Snippet を思い出しました。

-webkit-transform: translateZ(0);

分数幅を持つ問題のあるアイテム (i.icon-) を含むコンテナ (div.post) にこれを適用しました。問題は解決しました!

クレジット:ページ アンカーに移動した後、正しくレンダリングされていない (修正された) 要素を修正するために、この回答からこのソリューションを取得しました。

于 2013-06-27T21:45:32.697 に答える
15

それは本当にChromeのバグだと思います（私は24.0.1312.57 mを使用しています）。

この問題は実際には画像1+3にはありませんが、画像番号2で見ました。

画像の幅が分数（たとえば146.71ピクセル）の場合に問題が発生すると思います。静止表示では、これは146ピクセルに丸められます。トランジションでは、これは147ピクセルに上向きに丸められます（より正確には！）。

于 2013-02-24T20:22:41.747 に答える
4

薄いリンクで、Mozilla バグの解決策を見つけることができます。

1 つの CSS ルールを追加する必要があります。

-moz-backface-visibility: hidden;
于 2014-02-17T22:43:25.947 に答える
1

CSS3属性を使用するのではなく、不透明度を処理するためにjQueryを使用することをお勧めします。これは、最大幅が残念ながらトランジションを台無しにしているという点で正しいからです。 

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

jQuery を使用すると、トランジションに関するこれらの小さな問題の多くが修正され、不透明度の変更がクロスブラウザー互換で行われるようになります (はい、ブラウザーのトランジションには多くのタグがあることは知っていますが、すべてのブラウザーに属性があるわけではありません)。 .) :) お役に立てば幸いです。

于 2013-02-24T20:21:15.937 に答える