Lightbox bug on mobile browsers - image quickly slides to the left, then corrects itself

[hologramjelly]

Hello!

I am currently trying to design a portfolio site for my illustration company.

I have managed to wrangle most of the issues I have encountered so far, with one exception:

On mobile browsers, the fancybox lightbox exhibits the strange behaviour of quickly sliding to the left, before re-centering itself. I have created a video to show what I mean: https://www.dropbox.com/s/6f38avh4q4hmrtt/WeeblyLightboxBug.mov?dl=0

This bug does not seem to happen on desktop browsers, and after a quick search I wasn't able to find any forum threads of anybody experiencing a similar issue.

Any help would be greatly appreciated!

Karl

[Bernadette3]

Hi Karl. It's not doing this on Android mobile. Do you only see it happening on this device or do you have another iOS product you can test? 

[hologramjelly]

Hi Bernadette,

The device in the video is a gen 1 iPad pro. I have access to a second iPad, and it also behaves this way.

The same behaviour also occurs on my iPhone.

On all devices, it occurs regardless of which browser is used (Safari, Firefox & Brave).

Possibly this is an issue unique to iOS from the sounds of it?

After further examination, it seems like it has something to do with the fade animation "fading" to the top left corner of the page, then returning to the center of the screen upon completing the animation. On the iPhone, when the site is shown as a very tall list of images, the animation will zoom allll the way up to the top of the page, before falling back down to the center of the screen.

Is there a way to disable the fancybox animation?

[Adam7]

Are all the mobile devices running the same version of iOS? Are any of them running iOS 12 and up-to-date?

[hologramjelly]

Hi Adam,

All devices I mentioned are running the most up-to-date version of iOS 12, yes.

[Adam7]

Ok. Can you paste in the URL of the page with your gallery? I'll test on my own iPhone, although I couldn't quite read the URL from your video.

[hologramjelly]

Thanks Adam!

The URL is www.hologramjelly.com

[Adam7]

Thanks! I was able to reproduce what you are seeing with my iPhone. It looks like this was an issue in the past and was fixed... I'm wondering if it's specific to the theme you have. Can you try switching themes temporarily to see if that helps?

[hologramjelly]

Thanks for checking, Adam! I'm glad to hear that the issue is not unique to my devices.

I did change the theme to see if it would fix the issue, but it didn't seem to change the lightbox behaviour.

Do you have any suggestions for any code I could insert/modify to remove or change the fade animation?

[Adam7]

Hmm.. I'm not sure. I don't know if it's purely a CSS issue or if it's a javascript issue, or both. I'll take it to our QA/engineers, though, so they can fix it.

[hologramjelly]

Thanks Adam!

Really appreciate your help here.

Please do let me know and reply to this post if/when you have any news regarding this issue.

[hologramjelly]

Hi Adam,

It has been 2 weeks now, and the lightbox issue still persists.

I just wanted to check in with you to see if there have been any developments in resolving the issue, or if there are any steps I could take on my end to resolve it.

Aside from this problem, I really like Weebly and would like to continue using it as my website provider.

However if it's not possible to resolve this issue, I might need to start looking elsewhere.

Any suggestions you might have would be appreciated.

Thanks Adam,

Karl

[Adam7]

There is a ticket open with our engineers about this, although I'm not aware of any updates. I'm not sure how quickly this would be resolved as I'd imagine there are other issues which might be prioritized ahead of this one. I'm not saying it won't get fixed - I just want to give you a more realistic expectation.