Strange/laggy :hover behavior in Safari - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 9, 2013 at 12:38 am #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!

September 9, 2013 at 3:53 am #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,

September 9, 2013 at 4:25 am #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

September 9, 2013 at 4:57 am #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.

September 9, 2013 at 5:15 am #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?

September 9, 2013 at 5:22 am #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).

September 9, 2013 at 5:41 am #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!

September 15, 2013 at 1:28 am #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.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘JavaScript’ is closed to new topics and replies.