Welcart Basic:画像hoverでブリンク

2016 年 5 月 2 日

ホーム フォーラム テンプレート(テーマ) Welcart Basic:画像hoverでブリンク

このトピックには4件の返信が含まれ、2人の参加者がいます。1 年、 3 ヶ月前 narashika さんが最後の更新を行いました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #78461

    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/

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

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

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

    #78499

    ohnishi
    参加者

    こんにちは

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

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

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

    #78548

    narashika
    参加者

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

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

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

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

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

    #78551

    ohnishi
    参加者

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

    上記バージョンにて、

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

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

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

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

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

    #78554

    narashika
    参加者

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

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

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

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

5件の投稿を表示中 - 1 - 5件目 (全5件中)

このトピックに返信するにはログインが必要です。