Laggy response to CSS :hover for background color change
I have a really strange problem that I just can't figure out. I have already posted this question elsewhere, but have had no luck as of yet getting a definitive answer to what is going on.
I will explain the problem and then outline the steps I have taken to figure it out.
On my website http://stickerstack.co.uk I have a nav menu on the left side. 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.
Steps I Have Taken
2. Tested the same menu on jsfiddle:http://jsfiddle.net/5jA78/5/ and it worked perfectly.
3. I wondered if it might be a problem with my computer/GPU, but I replicated the issue on my friend's brand-new macbook air. (I am using my 2010/11 iMac)
1. The problem seems to disappear when I am playing a video in YouTube or have a game running in the background. (strange, right?)
2. I am using Shopify, and I am hosted on their servers.
3. The problem doesn't seem to appear on other sites using similar effects.
4. I know my JS is bloated, but I am pretty sure this isn't to blame (see above - I removed it and the problem persisted)
- -- --- ---- ----- ---- --- -- -
Thanks in advance to anyone who can shed any light on what might be causing this. If any more info is required, please let me know. Cheers!