Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Strange/laggy :hover behavior in Safari

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #149466
    ripsnorter
    Participant

    Hello. I am trying to change the background-color of elements in my nav menu by using the css :hover pseudo class. I have it working exactly as I want, but there seems to be a problem on my desktop mac with safari (mac is iMac (I think 2011) running latest Mountain lion and Safari versions). My site is built on Shopify and hosted with them.

    On my site, the effect of changing the background color of the element is laggy – sometimes it takes a second to change, and sometimes the background color doesn’t change at all.

    Interestingly, this fiddle works perfectly (in the same browser on the same computer).

    Because of this, I removed elements from my actual site to test what might be causing the problem. Removed all JS and all other CSS files. I pretty much got it down to only the menu but the problem remained. I’m totally stumped. Has anyone seen anything like this before?

    Amazingly, I realized that when playing a game and tabbing to my site, the nav menu works perfectly (with the game still running in the background). This makes me wonder if it is something to do with the hardware of my computer? Still, seeing as the menu works fine on my crappy laptop, this would surprise me.

    Anyone have any ideas? I’ve searched the web high and low, but can’t seem to find anything like this.

    Please let me know if you need any more information. Thanks!

    #149479
    Paulie_D
    Member

    Perhaps we could view the site to see if the problem is visible on other devices?

    A link would be nice,

    #149482
    ripsnorter
    Participant

    Thanks for the reply and thanks for moving the thread to the correct place.

    I was hesitant to post my site as it is unfinished. I know that sounds stupid!

    Its: stickerstack.co.uk

    Thanks again

    #149483
    Paulie_D
    Member

    Interesting, I too am seeing some lag in Safari 5, it’s more obvious in the way in which the sub-menus open and close.

    I’m assuming this is being managed through JS…perhaps there is something in there.

    #149485
    ripsnorter
    Participant

    Out of interest, does the menu in the fiddle I posted above present the same lag? Or is it just the one on my site?

    #149487
    Paulie_D
    Member

    As a matter of fact it does….but only in Safari.

    I will be the first to say that I am no expert in JS/JQ but from what i DO know, the JQ functions you have going on there do not look efficient….but I would again say, I’m no expect.

    Since it seems likely that’s where it is, I’ll move this over to the JS Jungle (at least for now).

    #149489
    ripsnorter
    Participant

    Cheers, I think you are right about my JS – it is very bloated. I don’t really know how to refine it!

    Still, the :hover lag remains for me even after disabling javascript in the browser and removing all instances of JS from my site. However, for me, the issues don’t present in the fiddle above or outside of Safari.

    Could it be true that Safari can’t handle my JS when other browsers can? Can I write off it being an issue with webkit as there’s no problem in Chrome?

    I am usually pretty good at figuring these things out, but this one truly has me beat.

    EDIT: Of course, if anyone passing has any suggestions as how to refine my JS, it would be appreciated!

    #150112
    ripsnorter
    Participant

    I have spent too long trying to fix this, so I have given up.

    I have found a satisfactory hack that prevents the problem from occurring.

    Applying a CSS animation to the element in question seems to do it. In this instance, I changed:

    .nav-item > a {
       display: block;
       width: 180px;
       padding: 12px 10px;
       background-color: #f6f6f6;
    }
    

    to

    .nav-item > a {
       display: block;
       width: 180px;
       padding: 12px 10px;
       background-color: #f6f6f6;
       -webkit-transition: all 10ms ease;
       -moz-transition: all 10ms ease;
       -ms-transition: all 10ms ease;
       transition: all 10ms ease;
    }
    

    I know it’s a hack, but it does fix the issue I was having. The 10 millisecond animation is basically imperceptible, but for whatever reason, it stops the lag.

    I thought it might be because it forces the browser to use hardware acceleration, but I don’t believe this is the case, as the lag remains when using other methods to do the same.

    I won’t mark this as solved, just in case anyone can shed any more light on the actual cause of the issue.

    Cheers.

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