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 Reply To: Strange/laggy :hover behavior in Safari

#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.