Full Bleed Image Blocks 50:50 Grey Image and Missing Animation

Site URL: https://optimum-time-dev-site.squarespace.com

Hi!

I am having a slight issue/bug appear on mobile and desktop after adding some custom-css to make an image block have two images side-by-side and full screen/viewport. 

Please see attached mobile screen view:

Basically the first image is greyed-out in the CMS View and when viewing the website on desktop and mobile. It just fails to appear on page load, then appears finally on page scroll. The 'slide-in' animation I have set globally also fails to transition, I'm guessing this is purely down to the image not appearing?

I've tried a few things in the custom css to target the image block independently but no joy.

Any help or pointers would be much appreciated! And thanks to everyone who helped me get this far by adding custom css fixes to the forum, they have been so helpful in customising the out-of-the-box Squarespace templates.

Oh, password is: OptimumTime

Thanks in advance!

Thanks so much for this Tuan, really appreciate your help! 

Hi @tuanphan I'm not sure if you can help me out again? On mobile I'm having a strange glitch effect on-scroll? It's happening to the two full-screen images that you gave me the fix for. The images sort of stretch then reduce to 100% as you scroll, really weird? Would be great to get your eyes over it and see what the bug is. Many thanks in advance! Jon

On 1/29/2022 at 1:19 AM, hellostudiojohn said:

Hi @tuanphan I'm not sure if you can help me out again? On mobile I'm having a strange glitch effect on-scroll? It's happening to the two full-screen images that you gave me the fix for. The images sort of stretch then reduce to 100% as you scroll, really weird? Would be great to get your eyes over it and see what the bug is. Many thanks in advance! Jon

Can you describe in detail? It looks fine

https://www.loom.com/share/ecacfe7982114b8ea37b8da812fc4336

Hi Tuan, thanks for getting back to me on this subject. It looks fine on desktop and within the mobile view in Squarespace but when I view it on an actual mobile device (iPhone) the glitch appears on scroll (only on the homepage and to the first two images). I've attached a quick video showing the issue. I hope it helps? Thanks! Jon

On 1/31/2022 at 6:03 PM, hellostudiojohn said:

Hi Tuan, thanks for getting back to me on this subject. It looks fine on desktop and within the mobile view in Squarespace but when I view it on an actual mobile device (iPhone) the glitch appears on scroll (only on the homepage and to the first two images). I've attached a quick video showing the issue. I hope it helps? Thanks! Jon

 

OT-Mobile-Glitch-480.mov 3.99 MB · 0 downloads  

 

Hi. I can't help with this, don't have tool to check code on real mobile.

You try posting to Squarespace Customization Resource Group on Facebook to find help.

I managed to fix this in the end, just incase anyone else experiences a similar issue. It's a bug coming from Squarespace. I pined it down to the 'set focal point' option applied to my images. As I scrolled on mobile the focal point would flicker from central focal point to the focal point I had set for mobile. Weird! 

If anyone else has experience of this issue and knows a work-around or code injection that would help, I'd love to hear more. 

Thanks!

Jon