My home page features a slider with numerous photos of my travels. It still works well on a Windows PC. However, since the update to version 3.1.0 in the last day or so, on my iPhone all of the photos are displayed in full, vertically down the page. The homepage text has all disappeared, the excerpt text doesn’t appear on the photos, and the slider no longer advances beyond the first photo.
I first restored the August 13 backup of my website to check to see if it was caused by the WordPress 7.04 update, but that didn’t fix the problem.
I then restored the August 12 backup, which downgraded the Travelify theme to version 3.0.9. The home page now works on the iPhone again.
Seems like Travelify 3.1.0 introduced a mobile-specific bug. Since rolling back to 3.0.9 fixes it, stay on 3.0.9 for now and report the issue to the theme developer with your iOS version and screenshots.
Thanks for the suggestion. Colorlib is the Travelify theme developer. Since this forum is hosted at colorlibsupport.com, I assumed that my post was informing the theme developer. What am I missing?
Thanks for the detailed report and the screenshots — they made this one findable, and you were right to post it here.
I can reproduce it, and it is our bug. Travelify 3.1.1 is out now with the fix.
What is happening. Your site does not load style.css directly. Something on the site (a minify or optimisation plugin) generates wp-content/themes/travelify/travelify_style.min.css and loads that instead. That file is served with no version in its URL and a one-year cache header, so when the theme updated, your phone kept using the copy built from 3.0.9 while everything else moved to 3.1.0. Your iPhone was running 3.1.0’s HTML and JavaScript against 3.0.9’s stylesheet. Your PC looked fine because it had picked up a fresh copy.
That mismatch is exactly what you saw: the rule that stacks the slides into a slider and the rule that opens the mobile menu are both new in 3.1.0, so with the older stylesheet every photo rendered at full height down the page and the menu button did nothing.
Why it is our fault and not just the cache. Until 3.1.0 the slider was driven by jQuery Cycle, which set the positioning directly on the elements — so a stale stylesheet never broke it. When we rewrote the slider without jQuery we moved that into CSS, which made the theme fragile to exactly this. 3.1.1 puts it back: the slider and the menu now set the layout they need from JavaScript, and only the cosmetic parts (transitions, colours) come from the stylesheet. A child theme carrying its own copy of style.css would have hit the same problem, and that is fixed too.
What to do. Either:
update to 3.1.1, which works regardless of which stylesheet gets served; or
stay on 3.1.0 and clear your minify/optimisation plugin’s cache — that fixes it there as well, since the plugin will rebuild travelify_style.min.css from the new file.
Either way it is worth clearing that cache after any theme update. If the plugin has an option to add a version string to the files it generates, turning that on will prevent this class of problem with any theme.
One correction. The 3.1.0 release notes said the old mobile menu was missing entirely. That was wrong — the drop-down you can see in your 3.0.9 screenshot is TinyNav, which shipped bundled inside the theme’s minified JavaScript. We misread the source and have corrected the changelog. The new menu replaces that drop-down; it is not the first one.
Sorry for the disruption, and thank you for taking the time to test the two backups and narrow it down — that is what identified the cause.
Thank you for the detailed explanation and the work you put into this. After clearing the respective browser histories, it does appear to be working on both platforms now.
Unfortunately, I have no idea what the minify/optimisation plugin is, or how to clear its cache. There is nothing by that name in my admin plugin list for my website. If that’s something I should deal with after any theme update I’d appreciate some more information about it.
