Jetpack messes with menu in Firefox only

  • Resolved aezzell2020

    (@aezzell2020)


    4 years ago

    This is on a Managed WordPress staging site – hence the weird URL.

    I had noticed that the menu wasn’t working as expected in Firefox – *sometimes* the background color would change and the cursor would change to the hand, but mostly not. As I move the cursor over the submenu items, sometimes the arrow flickers, but doesn’t change to a hand. Sometimes it will change to a hand and the background changes, too, on the way down, but not on the way back up.

    This is on 64-bit Windows 10 Pro, running Firefox 82.0.2 (64-bit). The menu works correctly for me with Chrome and Edge on the same machine.

    By deactivating the installed plugins and reactivating them one by one, I determined that having Jetpack activated appears to be what’s causing the problem. Deactivated, the menu works as expected. Activated, and it’s not working for me.

    Right now, the only plugin that’s activated is Jetpack, and I have commented out the few CSS modifications I had added.

    Any suggestions as to what the problem might be?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter aezzell2020

    (@aezzell2020)

    More data about this issue:

    I installed the actual Charitas theme (not the Lite version) and with that activated, the submenu worked, but there was still some flickering in Firefox.

    It’s difficult to describe, but it’s as if the text is stuttering while it’s appearing.

    Thread Starter aezzell2020

    (@aezzell2020)

    Heard back from WPLook support, since this was also happening with one of their premium themes.

    Adding this to the CSS fixed the problem:
    ****************
    ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, .nav-menu a.focus {
    -webkit-animation-duration:0s!important;
    -moz-animation-duration:0s!important;
    -ms-animation-duration:0s!important;
    -o-animation-duration:0s!important;
    animation-duration:0s!important;
    }
    ****************
    This is the code in the theme’s CSS file:
    ****************
    ul.nav-menu ul a:hover, .nav-menu ul ul a:hover {
    color: #fff;
    border-bottom: 1px solid #ccc;
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-delay: 0s; /* W3C and Opera */
    -moz-animation-delay: 0s; /* Firefox */
    -webkit-animation-delay: 0s; /* Safari and Chrome */
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;

    }
    ****************

    So changing the animation duration from 1 second to 0 seconds AND including .nav-menu a.focus seems to have fixed the weird behavior.

    Theme Author viktoras

    (@victortihai)

    Hey @aezzell2020,

    Thanks for sharing this!

    Regards,
    Victor

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Jetpack messes with menu in Firefox only’ is closed to new replies.

Tags