MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

表題の通りです。
Firefox(バージョン52で確認)で、画像にマウスを乗せた時にフェードでちょっとだけ透明度を上げるような動き、よくあるじゃないですか。

画像に直接transitionとopacityを指定したら、途中までは想定通りフェードで透明になるんですが、最後にopacity:1に戻ってしまうという事象が発生しました。

追記
どうやらwindowsのfirefoxだと想定通りに動くらしいので、macのfirefoxだけの事象のようです。
タイトルを変更させていただきました。
Firefoxでimgのhoverにtransitionとopacityを書くとバグる

MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

想定の動き(Chromeでの表示)

Firefoxでの動き(Firefoxでの表示)

ソースコードは以下です。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
img {
    transition: opacity 0.3s ease;
}
a:hover img {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>
    <img src="1.jpg"> // ←こいつにtransitionとopacityを付与しているとバグる
  </picture>
</a>
</div>
</body></html>

原因がつかめなくて四苦八苦してしまったのですが、img自体にtransitionとopacityを付与するのではなく、imgの親にtransitionとopacityを付与することで解決しました。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
picture {
    transition: opacity 0.3s ease;
}
a:hover picture {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>// ←こいつにtransitionとopacityを付与して解決
    <img src="1.jpg"> 
  </picture>
</a>
</div>
</body></html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です