Menus with more than one level cause Android Chrome to freeze [#2312065]

When using the superfish module to display a menu which has submenus, the Android Chrome browser freezes for several seconds on page load. Also, the display of the submenus is very slow and jerky.

The problem appears to be in the Superfish for Drupal library. If I remove the calls to addClass("sf-hidden") and removeClass("sf-hidden") the menu works properly and the freezing goes away. I honestly don't understand the point of this class. It seems to want to stick the objects -99999em off screen. Calling hide() and show() are all that is needed as far as I can tell. Maybe its something for older browsers?

Unfortunately, the Github page for the library clearly states that no modifications of the code are allowed. I'm not sure if this is a condition of the license or not.

Comments

Comment #1

jaylotta CreditAttribution: jaylotta commented 5 August 2014 at 18:25

Issue summary:

View changes

Comment #2

ChrisGrewe CreditAttribution: ChrisGrewe commented 8 August 2014 at 23:05

I can confirm jaylotta's issue. Having the same problem myself, and it is only with Chrome on Android (version 36). I've tested in Firefox on Android, and that seems to work okay.

Comment #3

ChrisGrewe CreditAttribution: ChrisGrewe commented 15 August 2014 at 13:52

I've just deployed a fix on my mobile CSS that might be helpful to others experiencing this issue.

In my CSS for smaller screens (my breakpoint is 960px, your mileage may vary), I added these lines:

body .sf-hidden {
left: -99em !important;
top: -99em !important;
}

This seemed to drastically reduce the amount of processing time needed to open the menu without having to make any jQuery changes that might affect other browsers. I went from about six seconds to open the menu (which is relatively large) to under 1. It's still a little slower than I'd like, but the performance is more than acceptable compared to what it was before.

Comment #4

jaylotta CreditAttribution: jaylotta commented 10 October 2014 at 20:46

It seems that the Android browser is trying to resize the viewport to include the offscreen items. The is the cause of the delayy from what I can tell.

Using show() and hide() may not be section 508 compatible. I'm not finding explicit guidance on the issue of using jQuery.

Perhaps this would be better.

.sf-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}