Strange jquery conflict causing iPad touch issues

—

by

cohnweb

Hi Kento,
My dropdown navigation on the iPad gets a little buggy as soon as I activate the additional “WunderSlider Gallery” plugin. Wunderslider itself does not seem to cause the problem.

I think I have narrowed it down to a conflict possibly involving the wordpress core Jquery file that the rest of my theme relies on: http://amas.staging.wpengine.com/wp-includes/js/jquery/jquery.js?ver=1.10.2 (and possibly http://amas.staging.wpengine.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1) … If I comment out the lines that point to that file in /wp-includes/script-loader.php the nav works fine on iPad, even with “Wunderslider Gallery” plugin activated.

Here is the development site: http://amas.staging.wpengine.com I have deactivated all other plugins (except for NextGen Gallery and Advanced Custom Fields because they are required).

Nav should work as follows: 1. Touch “Information Resources”, and the sub menu appears. 2. Then touch either of the sub-menu items, and their sub-sub menu appears. If you decide to tap on any of these parent or child elements, it takes you to the page as expected.

However if Wunderslider Gallery is activated, and you touch “Information Resources” it prematurely takes you to the page without letting you see the sub menus.

UPDATE: I activated twentytwelve, untouched with the exception of creating a barebones homepage template page that calls the custom field where the gallery shortcode is coming from. So that breaks the nav dropdown on iPad. The other pages that don’t utilize the homepage template (and therefore have no wunderslider) work fine.

UPDATE 2: I think I narrowed it down: When I delete and re-install Wunderslider, and the general settings are set to all defaults, the problem does not happen. But If I change the settings at all, that is when the navigation dropdowns become buggy. It doesn’t matter if I’m using my site currently in development, or a fresh install of wordpress and Twenty Twelve or other default WP themes. I think it has something to do with the “proportional” setting that I need to use, but I am not sure.

Many thanks!
Cindy

Posted in
Tags , , ,

Comments

3 responses to “Strange jquery conflict causing iPad touch issues”

  1. cohnweb Avatar
    cohnweb

    I agree; at this point I think it is CSS related. I have been troubleshooting the theme’s default styles.css around line #399, Menu. I think it may be related to these, but if I remove the display, it breaks the nav.

    .main-navigation ul li:hover > ul {
    display: block;
    }
    .main-navigation ul li:hover > ul > li {
    display: block;
    }

    1. kento Avatar
      kento

      You seem to have fixed it, with the second display: block commented out?

  2. kento Avatar
    kento

    Hi,

    That version 1.10.2 would be ok, that wouldn’t be a problem. Especially if it only happens on the iPad, I can think of CSS rules conflicting or some Javascript error happening for the platform.

    Can we have admin access to the site please? Checking right now, the plugin is disabled and the shortcode appears on top only without being rendered. We can have a look after activating it and seeing what else you have installed.

    Cheers

Share