Hi Josh,
It’s actually Bootstrap, not ShiftNav, that will be responsible for opening that modal.
I took a look at the Bootstrap Modal JS, and it seems like the issue is that the events are click-based (rather than optimized for touch).
What may be happening is that on a tap, iOS only fires the hover emulation event, rather than the full click event. I think iOS does some special stuff to determine if there are any :hover states or events (since there isn’t any actual “hover” on a touch screen), and if so, prevents the click from firing before that hover event is triggered. This is how it allows CSS hover-based flyout menus to work, for instance.
One thing to try would be to disable any :hover states on the menu. For example, try disabling the “Highlight Targets on Hover” and “Highlight Targets on Active” settings in ShiftNav to see if that helps iOS process the click immediately.
(Just a heads-up, my responses may be delayed a bit this week as I am currently traveling)
Hope that helps!
Chris
Hey Chris! Hope you are enjoying your vacation. No worries on delayed responses, awesome support as always.
I thought the same thing originally and spent some time trying to optimize it for touch but couldn’t get it.
I forgot to mention the reason I think it is shiftnav. http://tammymealplan.com
The settings icon is set up the same way, but the only difference is that it is not a menu item and not in a shiftnav DOM element (no shiftnav on that site).
The modal opens just fine on tap.
But anyways I found a workaround and probably the better way to go about it. I replaced the code I inserted into the shiftnav js to :
$('.shiftnav-nav #menu-item-38').on("click touchend", function() {
$('#myModal').on('shown.bs.modal', function(){
plugin.closeShiftNav();
});
});
It seems to work better than using shown seems to work better than show.
Now the issue is that when the modal opens it is constrained to the shiftnav-wrap (which nearly all content is now in/ child of)
But after I scroll it looks fine. (Again, on iphone only, works fine on ipad and desktop)
see pic: http://tinyurl.com/pqyd2af
Any ideas on what is causing this?
Hey Chris, never mind. It’s a theme issue. Using enfold and it seems to be color sections an possibly other containers causing it. I’ll sort it out with them.
Thanks again for your help!
Great, thanks for letting me know, Josh – glad to hear you got it sorted out! 🙂
Best,
Chris
