Home › Forums › JavaScript › Strange/laggy :hover behavior in Safari › Reply To: Strange/laggy :hover behavior in Safari
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.