Content Does Not Load On Mobile If Scroll Effects Present

[whitemedia]

Hi @charlie,

I hope you are well! I am posting this one in the beta forum, as it is something I have noticed on a good number of sites and could be an underlying bug?

The scenario is, I have a post built in Cornerstone. There is also a Single Layout in place to style the overall post. I am using either a Text element of Component created from a Text Element. The scroll effect is turned on for the Element/Component, leaving at the default setting.

When the post is viewed on mobile (in my case iPhone 11 Pro on Safari, all software fully updated), any content with scroll effects will not display. I can sometimes replicate this in Chrome on a Windows laptop with the browser window shrunk to emulate a mobile.

If memory serves me correctly, I have had this behaviour for pages as well.

I have tried disabling ALL plugins, removing all JS and CSS, yet the issue continues. The very strange thing is that the issue appears suddenly and with no warning, having been working fine until the point when it does not! LiteSpeed cache has also been turned off and/or disabled. There are no CDNs or other caches in place.

If I remove the scroll effect from an Element / Component, it then loads normally.

Have you come across this scenario before? Details in Secure Note!

Thanks,
Christopher

Live Screenshot on iPhone

Preview In Cornerstone

[charlie]

I unfortunately couldn’t recreate bringing your site into my dev site, which has been the story of my life recently. Probably some plugin I’m missing. I’m just gonna take a stab a fix and cross my fingers. I’m also looking at another mobile effects issue on this site so maybe they are connected. Thanks for the info.

iOS 17.3.1 - elements still blinking on mobile

I haven’t really been able to recreate your issue in iOS 17 even when grabbing a template from your site. Let’s try a few things. Do you have a really simple page with this issue? Send me that page if you can. It will at least let us cross some things that maybe the homepage is doing. In that thread I noticed some custom css. Try removing the custom CSS and see if the fixes with positioning I did help fix the issue. In the meantime I would probably just try the guides outlined here to remove…

[charlie]

I’ll add too, that behind the scenes something is going weird with your “Author” effects. I’d play around with that and see what you find or if removing the effects there fixes the issue.

[whitemedia]

Hi @charlie,

Thanks for the reply! With your pointers, I have managed to get a little closer to finding the solution.

In the “Blog Post” Single Layout, I have removed individual Elements and hierarchy items. In the below screenshot, removing the Column named Sign-Up Form meant that the page rendered correctly.

The column had no customisation, except height:100%. Removing this resolved the issue. Does it make sense and should this have really caused the issue?!

Also, not quite sure what you mean with the “Author” effects - or are they also resolved from your view? “By WordPress” is not visible at this end.

Thanks,
Christopher

[whitemedia]

Hi @charlie,

Something I missed. In the last screenshot the div within the column “Sign-Up Form” is set to position: sticky and top: 150px, but sticky is not working. EDIT: The column needed a 100% height for it to work again.

Thanks,
Christopher

[charlie]

Okay so removing the height 100% fixed the image not loading / the effects not triggering?

By “Author” affects I mean right under the post title. When I import it goes under my wordpress username which is “wordpress”.

[whitemedia]

Yes, correct. Removing the height 100% resolved the display issues on mobile, which had the effects.

The “Author” comes directly from one of the Cornerstone Pro templates - the one with the “stripe” and similar look, so I presume the import defaulted it to your WP display name. My user profile for that account had the username “admin”, though a different ID, login and public name.

Does that make sense?
Christopher