ECP month view completely broken on iPhone, iPad (mobile Safari)

[Rebecca Redding]

When viewing event calendar month view on an iPhone 5 or iPad the smaller event calendar with dots appears but is un-clickable and does not present events as expected. It also appears to prevent some other javascript clicks from firing, however no conflicts appear in the console and removing all javascript and disabling all plugins did not fix the problem.

I will post a private reply with a link you can check out but I believe this ought to be easily replicable by simply viewing a calendar’s month view from an iPhone or iPad. This is after today’s upgrade to 3.11.1…

[Rebecca Redding]

This reply is private.

[Josh]

Hey Rebecca,

Thanks for reaching out to us!

Have you made any modifications to the site since posting this thread? Looking at your site, it appears that the mobile CSS files are not getting loaded, causing the calendar to display as https://cloudup.com/cbNvXNAjyVr on mobile.

Thanks!

[Rebecca Redding]

Yes, I apologize, I killed the responsive styles using add_filter( ‘tribe_events_kill_responsive’, ‘__return_true’);

I have since added them back so you should be able to see the problem.

[Rebecca Redding]

I’ve tracked the problem down to the following scripts:

tribe-events-calendar-script
tribe-events-bar
tribe-events-calendar
tribe-events-pro-geoloc
tribe-events-pro

Having any of these scripts loaded prevents my own jQuery from firing. I will include a link to my js file in a private post below.

Also of note, The mobile calendar does appear to work at all, even if I do not include any of my own custom JS. Clicking on a date simply does nothing.

Any help you can offer would be great…

• This reply was modified 8 years, 8 months ago by Rebecca Redding.
• This reply was modified 8 years, 8 months ago by Rebecca Redding. Reason: clarification

[Rebecca Redding]

This reply is private.

[Rebecca Redding]

Some further information:

Moving my own jQuery functions from (document).ready to (window).on(‘load’) allowed them fire properly. This doesn’t seem to be a solution but rather a hackish workaround.

[Rebecca Redding]

and to clarify, clicking days still does nothing on iOS…

[Josh]

Hey Rebecca,

I’ve checked out the site again and see the mobile style loading however I can also note that the events aren’t listing below the calendar as they should.

I’ve tested on my local install and the mobile layout is displaying as expected and I’m unable to replicate the issue. Does the issue persist for you if you switch to a default WordPress theme?

If so, you can try disabling your javascript file and adding each function individually until you find the conflicting customization.

I apologize I was able to give you a more direct response but hopefully this can help to get you pointed in the right direction.

Thanks!

[Rebecca Redding]

Yes, the problem persists. Do you have any insight as to why my document ready functions don’t fire on event calendar pages?

Again, here are the files that will cause this strange behavior:

tribe-events-calendar-script
tribe-events-bar
tribe-events-calendar
tribe-events-pro-geoloc
tribe-events-pro

If any of these scripts are loaded, my document ready functions don’t work. The events do not show below the calendar, regardless.

I have worked around this issue by hiding the calendar on mobile and offering a link to list view instead. I will test future releases in hopes that this gets worked out. If there are any details that I can provide to help, please do let me know.

[Josh]

Hey Rebecca,

I just tested by taking your entire javascript file that you’ve provided and adding it to my active theme on my local install. The mobile display worked normally and as expected. I also took all the functions within the on load section and moved those back to document ready and tested again. The mobile view continued to work as expected. I tested these using the TwentyTwelve theme.

There may be another plugin causing the conflict or possibly something else within your theme. Can you verify that you’ve followed the Testing for Conflicts procedures completely?

Thanks!

[Rebecca Redding]

I have not only followed that procedure completely but I’ve stripped my theme down to bare essentials (wp_head, loop, wp_footer) and still encounter the problem…

[Josh]

Hey Rebecca,

I apologize for any continued frustration here. When saying you’ve followed completely, are you able to see a normally functioning mobile view with a default WordPress theme (such as TwentyTwelve)? I know there was some resolution for you when moving when your javascript functions run, however It doesn’t look like that was a complete resolution to all of the issues. Was curious if switching themes completely got you back to a fully functioning calendar? This way you’ll know where to narrow in on.

As far as the javascript conflicts, again I was unable to replicate using your javascript file as uploaded as well as when moving all the secondary functions to document ready. However, that may not have been a full proof test since I didn’t have all the necessary dependencies. For your own testing, have you tried disabling each function within your javascript file individually to see if there is a specific function there causing the conflict?

Thanks!

[Rebecca Redding]

Perhaps you are not testing the mobile view on an actual iOS device?

I see a fully functioning mobile view when using a desktop browser, however on an iOS device, the clicks on each day do not register.

As far as I can tell, loading the TEC scripts listed above prevent any click/focus events in (document).ready from firing at all.

[Josh]

Hey Rebecca,

Thanks for following up with us!

That’s strange, I was able to see the site with the broken issues you described when viewing on my desktop and scaling down.

Unfortunately I can’t completely replicate since I do not have all the dependencies from your site that are called within the conflicting “init.js”. Have you tried deactivating each one of the functions in that file individually to see if you’re able to narrow in on the culprit rather than it just being that entire file.

Thanks!

[Author]

Posts