Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Flickering Navigation Back

Home Forums Support Flickering Navigation Back

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #146330
    Garth Dryland

    Hey Tom,

    Since the latest theme update my search icon is flicking off and on, moving the menu items again.

    I also note that the drop down triangles in the menu (when having page links below the primary link(s) which were previously also an issue) are working as they should.

    I assume this menu bar search icon still uses HTML code not Javascript as it was previously written when I raised this issue some months back.

    All my sites menu bar search icons flash off and back on, moving the menu items for a split second.

    I hope this is a quick fix. Its so annoying to see.
    I included a site link below for reference. Hopefully you see the issue on your connection. Thanks.

    http://accountwise.co.nz

    #146358
    Tom
    Lead Developer
    Lead Developer

    The flicker you’re seeing is just the font icon loading – like an image, it has to load (although it’s much faster than images).

    Unfortunately there’s no real way to prevent that initial load from happening.

    #146366
    Garth Dryland

    Really?

    It only started doing this flicking reload thing again since the latest update. Also aren’t the triangles for the menu drop downs also images? If the drop down triangles are fine and are still images surely they should also be reloading however they are 100% rock solid? Also nothing has been changed on my site during this period other than general updates, one of which was the GP main theme.

    #146367
    Tom
    Lead Developer
    Lead Developer

    The arrows for the dropdown menu are actually using CSS borders to create a triangle effect – no icon fonts or images.

    You can inspect the element of the search icon to see it’s just using a regular Font Awesome icon: <i class="fa fa-search"></i>

    Chrome is known for delaying before showing icon fonts – it was touched on here: https://css-tricks.com/forums/topic/icon-fonts-pause-before-rendering/

    Alternatively, you could create an image, and then add it to your menu item, and give that menu item the class of “search-item custom”.

    Then add this CSS:

    .search-item {
        display: none;
    }
    
    .search-item.custom {
        display: block;
    }

    Personally I’ll take that extra split second of load time in Chrome over having to load an image, but it’s all preference 🙂

    #146371
    Garth Dryland

    Ok Tom,

    I will have a play around with that and see if I can minimize/eliminate the issue.

    Cheers for the first class support.

    #146414
    Tom
    Lead Developer
    Lead Developer

    No problem – let me know if you need more info 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.