Ok. I tried to make a reduced test-case in codepen and actually ended up having an example that couldn’t do anything on mobile (despite most of the features working on my site). I will continue to work on the codepen and will post a link if and when I get it working.
On mobile devices, be it my Razr Maxx, iPad 2 or iPod, 3rd Gen, I cannot get the popup to work. It works great in all browsers via desktop (IE does its skip of the transitions).
When you tap on the small circles, the center image does change. But when you tap on the center image to enlarge it, nothing happens. Now, you can tap it 100 times and I know that the toggleClass() (you might note in source view that I’ve even tried an addClass(), removeClass() version) is firing because if you tap the center image an odd number of times (1, 3, 5, etc) then tap one of the small circles, the center image changes and when it comes back it is in full screen mode. Still following?
I’ve more or less traced the issue to the CSS3 animation not displaying when the class is added.
How can I get the mobile browsers to respect animation changes triggered by a second class being added or removed from an element AFTER the webpage has finished loading?