Welcart Basic:画像hoverでブリンク

[narashika]

——————————————-
WordPress のバージョン：4.3.1
Welcart のバージョン：1.8.2
ご利用のテーマ：Welcat Basic(子テーマ)
症状を確認したブラウザ：firefox
サーバー（会社名、サービス名）：Google Compute Engine
SSLの利用：あり
WordPress のパーマリンク設定：投稿名
——————————————–

Welcart Basic レスポンシブで使いやすいですね。
開発ありがとうございます！

画像のhoverエフェクトで気になる動作があります。
画像にhoverすると、一瞬画像が小さくなってから
cssに書いた動きをスタートするため、ブリンクした
ように見えます。

デモサイトでも同様の現象が確認できます。

https://themes.welcart.info/basic/necklace05/
https://themes.welcart.info/basic/category/item/itemgenre/necklace/

ブリンクするのは最初の一回だけです。

よくある質問にあった、画像エフェクトをはずす方法を
試してみましたが改善されません。

なにかヒントをいただけると助かります。

[ohnishi]

こんにちは

以下のスタイルを追加してみてください。

a img {
	box-shadow:#fff 0 0 0;
}

どうぞよろしくお願いいたします。

[narashika]

ご回答ありがとうございます。

いろいろと試したところ、この症状はFirefox固有のものであることがわかりました。
デモサイトでもFirefoxのときに、症状が出ます。

box-shadow:#fff 0 0 0;
-moz-box-shadow:#fff 0 0 0;

等、当ててみましたが改善されません。
デフォルトのsystem.cssの mozベンダープレフィックスあたりを疑ってみましたが、
どうにもよくわかりません。

クリック率にも影響するところなので、気になります。

[ohnishi]

——————————————-
Firefox 45.0.1
——————————————-

上記バージョンにて、

1. 「box-shadow」を入れずに確認
同じ症状が発生します。

2. a img に対し「box-shadow」を適用させ確認
画像ホバー時のちらつきがなくなりました。

3. 2で適用させたスタイルを削除し、再度確認
画像ホバー時、ちらつきが発生するようになりました。

どうも img > animateでeasing を適用させていることが原因かと思われます。

確認したページは、トップページ・商品一覧ページ・検索結果ページになります。
どうぞよろしくお願いいたします。

[narashika]

——————————————-
Firefox 46.0.1
——————————————-

どうやら昨夜Firefoxが自動アップデートされたようで、
最新バージョンで症状が再現しなくなりました。

お忙しいところ、
ご対応ありがとうございました。

今後もWelcartの進化、期待しております！

[投稿者]

投稿