Could you let me know what happens when you click on the hamburger icon to open the navigation menu? I tried to go through all your pictures in the carousel view a few times (these are great photos, by the way!), but the menu always seemed to work. I was using Chrome on an iPhone 5.
I also tried leaving the Carousel view before I went through all the images, but it seemed to work as expected.
Am I missing something? Is it possible that the page was still loading when you tried to click on one of the links?
Hi Jeremy,
Thank you so much for responding! The hamburger icon becomes inactive – it turns white and does nothing. I think you can reproduce the bug if you follow these steps:
1. Go here http://www.thedaddynamic.com/category/photography/ and then click on the Street Photography: Denver Rino link
2. Do NOT try the hamburger menu
3. Click on the first photo from the carousel
4. Exit out of the carousel and then try the menu
It breaks every time for me if I follow those steps exactly. Let me know, and thank you.
-Ethan
I still can’t seem to be able to reproduce. I also tried on an Android phone running Android 4.4.4, but the hamburger menu always works.
Are you logged in to your WordPress account on your phone? I wonder if the problem could be limited to logged in users.
Hmmm, very odd. I am not logged in. If I test the menu first and then try the carousel it doesn’t break, but otherwise it does. The theme author was able to reproduce it, as seen here: https://wordpress.org/support/topic/mobile-menu-bugs-with-jetpack-carousel
Please let me know if there’s anything else I can do to help.
Alright, I was able to reproduce on an iPhone 6, and then in Safari on my laptop. I don’t see any Javascript errors, and the new CSS classes are properly applied to .overflow-container and .site-header, so I’m not sure what’s wrong here:
http://i.wpne.ws/aRRT
Could you try to deactivate your caching plugin’s Minify functions, and let me know if it changes anything?
Minify disabled and cache cleared. It still seems to be happening for me, but let me know if it has changed for you.
I can still reproduce as well. I’ve asked one of our developers to take a look, but so far we don’t really understand what’s happening, and why it only happens in some browsers.
I’ll get back to you as soon as we find a solution!
Eek, I found a difficult one! Thanks so much for all your help!
After running some tests, we haven’t found the cause but we may have a solution.
Your theme automatically applies some CSS changes via Javascript whenever someone taps on the hamburger menu. These changes are made in this file, in the following lines:
menuPrimary.css('transform', 'translateX(' + -menuWidth + 'px)');
$('#menu-primary-tracks').css('transform', 'translateX(' + menuWidth + 'px)');
That .css() setter should automatically take care of prefixing the property name (transform), but some weird reason it doesn’t when you exit the Carousel view.
Could you ask the theme author to add the prefixes manually in js/build/production.js, and see if it helps? In our tests, .css('transform', 'translateX(500px)') didn’t work when exiting the Carousel view, but .css('-webkit-transform', 'translateX(500px)') works fine.
Let me know how it goes. In the meantime, we’re still looking into it to see if we can understand why it doesn’t work in the first place.
