3

ホバー時に遷移するレスポンシブ画像があります。画像の幅が 100% の場合、ホバー トランジションは正常に機能します。ただし、FF21 では、画像が縮小し始めるサイズまでブラウザー ウィンドウを縮小し、画像の上にカーソルを合わせると、一部のサイズで (背景画像の) 小さいながらも認識可能な上方向への移動があります。それは非常に小さなずれであり、すべての幅で発生するわけではありません (奇妙なことに)。

以下の 2 つの状態のスクリーンショット (ホバーなしの明るい領域とホバーのある暗い領域)。バグは「x」で最も明確に見られます。効果は特定の幅 (すべてではない) でのみ発生し、非常に小さいです。それでも、それは明らかにそこにあります。

バグの例

IE と Chrome も試しましたが、この動作は見られません。ということでFF仕様らしい。画像のサイズを 1px 低くするようにリサイズしているようです。それがなぜなのか、それを修正する方法を知っている人はいますか？（下のjfiddleリンクで、自分で確認できます）

http://jsfiddle.net/t3Djd/1/

HTML

<body>
  <figure>
      <h2><a href="#">Title</a></h2>
      <a href="#"><img src="http://placehold.it/500x450" /></a>
  </figure>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    width: 100%;
    font-size: 100%;
}

/*========================================
============== CENTER IMAGES =============
========================================*/

body {
    text-align: center;
}

/*========================================
=========== RESPONSIVE IMAGES ============
========================================*/

figure, figure > a, img {
    max-width: 100%;
}

/*========================================
============ GENERAL STYLING =============
========================================*/

figure h2 {
    text-align: center;
    font-style: italic;
    font-size: 1.75rem; /* 16 x 1.75 = 28px */
    font-weight: normal;
}

figure h2 a {
    text-decoration: none;
    color: black;
}

/*========================================
============ HOVER TRANSITION ============
========================================*/

figure {
    padding: 1rem 1rem 2rem;
    position: relative;
    display: inline-block;
}

figure h2 {
    margin: -1rem 0 0 -1rem; /* offset the figure padding */
    z-index: 2;
    position: absolute;
    line-height: 0;
    width: 100%;
    top: 50%;
}

figure h2 a {
    z-index: 1;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

figure:hover h2 a {
    color: rgba(255,255,255,1);
}

figure > a {
    display: inline-block;
    line-height: 0;
    background: black;
    box-shadow: 0 2px 5px black;
}

img {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

figure:hover img {
    opacity: 0.5;
}
4

1 に答える 1

6

これは、Firefox を使用した既知のバグです。この問題は、ここで既に取り上げられています。

そして、ここにFirefox Bug Reportへのリンクがあります

明らかな修正: box-shadow: #000 0em 0em 0em;cssimgタグへの適用

于 2013-06-13T13:57:12.563 に答える