画像が一瞬ジャギーになります

お世話になります。ホームページを作っている者なのですが、不思議な現象が起こっていて困っています。

ホームページのロゴ画像をオンマウスしたら、透明度を60%にする処理をCSSで行わせています。

CSS
1header img {
2    display: inline-block;
3    margin: 0 30px;
4    width: 400px;
5    cursor: pointer;
6    transition: opacity 0.45s ease;
7}
8
9header img:hover {
10    opacity: 0.6;
11}

transition処理が実行する瞬間、画像にジャギーが現れます。

以下がその問題のホームページです。
hogehogeago.com

以上よろしくお願い致します。

5o5o_wagon

2016/09/27 02:15

retinaディスプレイと普通のディスプレイ、macのSafari,Chrome,Firefoxでそれぞれ組み合わせて確認しましたが、それらしきものは確認できませんでした。。問題が起きる環境をもう少し詳細に書いていただけると原因が特定しやすいかと思います。

行動規範の内容に同意します

回答3件

ベストアンサー

私の環境でも問題を確認することはできませんでした。
すでにみられているかもしれませんが念のため貼っておきます。
https://yumeirodesign.jp/blog/201312/csstransforms_fixed.html

投稿2016/09/27 14:08

ruuusaamarki

総合スコア468

私の環境では確認できませんでしたが、プログレッシブJPEGやインターレースGIFの影響とは考えられないでしょうか。

これが原因であれば transition を外しても再現するはずなので、transition を外して検証みてはどうでしょうか。

Re: airulove さん

投稿2016/09/27 14:03

think49

総合スコア18162

think49

2016/09/27 15:14

なぜか回答本文が表示されないのでコメントで追記します(運営に問い合わせ中)。 --- 私の環境では確認できませんでしたが、**プログレッシブJPEG**や**インターレースGIF**の影響とは考えられないでしょうか。 - [JPEGには2種類ある！プログレッシブとベースラインの違いは何？](http://naifix.com/jpeg/) - [インターレース - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%AC%E3%83%BC%E3%82%B9) これが原因であれば `transition` を外しても再現するはずなので、`transition` を外して検証みてはどうでしょうか。 Re: airulove さん

行動規範の内容に同意します

その問題のホームページには header img に該当するものがないですね。

投稿2016/09/27 07:54