Element animations on iPhone

[ShaunCoward]

Hi, I’m playing with some of the new element animations on a site. Everything is fine when viewed on desktop or laptop, but on mobile the content animates in, then disappears. Tested on iPhone Safari & Firefox. This is the page: https://www.art-base.co.uk/memberships/. Am I missing something obvious? There’s no ‘out’ setting activated that I can see.

Another question relating to the same page. At the top, you’ll see I’m playing with the ‘split’ template. Is there a simple way to make the orange overlay on the right to sit under the image? I’ve tried adjusting the z-index entries but can’t do it!

Thanks,
Shaun

[ruenel]

Hello Shaun,

Thanks for writing in! Please keep in mind that since you have installed a caching plugin LiteSpeed Cache, please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

You may need to clear your iPhone browser cache or use private browsing mode and test your site again. If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Regards.

[ShaunCoward]

Hi there, thanks for your reply.

Yeah, my hosting provider installed LiteSpeed by default, I usually flush the cache after making changes and this is a live site.

Please note, it’s not an issue whereby the changes were not visible at all - rather that the animations worked but then the animated disappeared. However - a further development! After updating iOS on iPhone, the animations worked fine on Firefox, Safari and Chrome. Everything seems fine on newer laptop/desktop versions but the animations are still not working properly on an old MacBook Pro that hasn’t been updated forever. Could it simply be that older browsers are unable to deliver the animations correctly? That’s fine if so, but something for me to take into account.

Thanks,
Shaun

[christian]

Hey Shaun,

Yes, the older browsers don’t support the animations so it would be best that you check your analytics to see if you have many users coming from or using older browsers for you to decide if you’ll use animations or not.

Also, just a note about older browsers, WordPress doesn’t support them as well. See https://make.wordpress.org/core/handbook/best-practices/browser-support/

[ShaunCoward]

Okay, that’s good to know. Thanks!

[matt]

You’re welcome, Shaun.