mrbken

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. By applying a CSS animation to the element in question. 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.

I did wonder if it was related to the GPU. Interestingly, the problem doesn't exist when a game is running. I thought that the game might somehow 'fire up' the processor, making the :hover work smoothly when the game is running. But it's a :hover event -- it's not exactly a graphically intensive thing to process. Or is it? I don't know! The mystery remains...

Thanks for the response, throzen. That is a strange thing. What is bothering me about this problem is that I don't think it's the actual :hover that is causing the issue. As I explained above, a menu exactly the same made in jsfiddle seems to work fine. Anyway, I'll keep looking and of course I'll post the solution here if I find it (and even if there is one to be found). Thanks again If anyone else has any ideas, I'm all ears!

Thanks folks! Glad to know it's okay with you both. Yeah, I cleared my cache. I feel like I've done almost everything. I was pretty much resigned to it being a problem with my computer until I checked on my friends and it showed the same problem. The only thing I can think of that might stand us apart from you guys is that we are in Asia. Might this have something to do with it?

Have you looked at flexslider? It is free and has a bunch of options. I think it is responsive, too, if that's a consideration. http://flexslider.woothemes.com/thumbnail-slider.html

Thanks a lot for checking. Very much appreciated The issue still exist my end. Presumably you are using OSX and Safari? Is the hover completely smooth for you? The problem occurs for me when I run the mouse up and down over the menu. Thanks again for your time.

Hi everyone. I have a really strange problem that I just can't figure out. I have already posted this question elsewhere, but I think I need to turn to the expertise of this forum to get it solved once and for all. The problem concerns the navigation on the following site: http://stickerstack.co.uk As you can see, I have (li a) elements in the nav menu set to change background color on hover. Everything works perfectly where I have tested it so far (Mac - Opera, Chrome, Firefox; and Windows - Chrome, Firefox). However, in Safari (on Mac (and maybe windows - didn't test)) there is a strange lagging effect where the background sometimes either doesn't change, or lags and changes a second or two after mouseover. I have done all the usual things, including stripping away all the unneeded HTML, CSS, and Javascript on my site until left with the bare essentials used to construct the menu (pure HTML and CSS), but the lag remains. Even more strangely, a recreated fiddle of only the menu: http://jsfiddle.net/5jA78/4/ works just fine on Safari on the same iMac. I should note, when I played Bioshock Infinite and tabbed out to Safari (with the game running in the background), the menu worked perfectly (i know this is weird!). This was not a fluke, and whenever I play a graphic intensive a game and tab to Safari, the menu behaves fine. This led me to think the problem might be related to the graphics on the (2011 i think) iMac I was using. However, the problem exists on my friend's brand new macbook air. I am using Shopify, and I am hosted on their servers. Certain CSS files are saved as .liquid, if this makes a difference. Also, I know my javascript is bloated, but I can't see this as causing the issue, as the problem seems to remain even after removing all JS (aside from that from Shopify) from my site. This is driving me crazy, and I would love some help! Thanks!