表題の通りです。
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>
