sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.

Home Page:https://www.lightgalleryjs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Blurry images when zooming on iOS devices

arrschmitt opened this issue · comments

Description

The feature requested in #1055 seems not to work on iOS Devices (e.g. iPhone X). We've tested with the latest lightgallery version 2.4.0.

See these screenshots:

Firefox desktop mobile preview with simulated iPhone SE:

firefox_simluation

Real iPhoneX Screenshot:

iPhoneX

Environment

  • Browser and version - Safari 13.1
  • OS - iOS Catalina
  • lightGallery version - 2.4.0

Additional context

We will purchase the team license, but only if this feature also works on iOS.

Hey @arrschmitt,

The fix is not included in version 2.4.0. I'm currently working on the zoom module and hope It will be ready by this week

I just tested the new commit on the lg-zoom branch. It looks like it fixes the issue for me on iOS devices!

I look forward to the final release, but thanks for your hard work!

Sure, I'm re-writing the zoom module completely. I'll try to complete it ASAP

@JVital2013 Where is the commit that was working for you? Have tried several different versions, including the latest betas, but all are still giving blurry iOS images. Even if not released yet, would be good to have some version that's working since zoom is important for my site.

Hey @smerriman ,
It is in https://github.com/sachinchoolur/lightGallery/tree/lg-zoom branch. Due to a product release, I couldn't work on this feature in the last few days. But, I hope it will be completely ready in a few days

@sachinchoolur Unfortunately, that branch isn't helping at all - here's a barebones example:

https://www.cre8d-design.com/lgtest/test.html

Despite being a high-res image, zooming on iOS shows the image in very low quality, while other devices / computers work fine.

OK, I think I see - there's a modified version in the src folder, but it hasn't been built in a way that's usable on a website currently (I was using the dist folder in that branch).

You need to build it yourself; clone the branch and run npm run-script build. For me that was easier said than done, but I've attached my build in case you run into issues.

lightgallery-96d8c17.zip

Thanks! Unfortunately, even that version isn't working on iOS for me - but hopefully a working version will end up in the beta release soon.

@sachinchoolur I really don't want to be pushy as I'm sure you have other priorities, but we have a site launching soon where a zoom feature is vital (it's being used for floor plans).

Given you mentioned "a few days" I've been deferring the client saying it will be fixed in time for launch - but that was a couple of weeks ago (and you also said "ASAP" two months ago).

Totally understand these things can be hard to estimate etc, but if there's a chance it's not going to be resolved soon, I'd rather simply know so that I can start looking for an alternative solution.

PS - I see that in the package JVital2013 uploaded, it works if you enable the zoom-to-full-size option - but it doesn't work if clicking the icons to zoom in/out partially, or pinch-zooming. I'm guessing your plan is to set the width/height on every zoom level, rather than only when it reaches max-size.

Actually, I've just been doing more research on this and it seems like a lot of other libraries have the same issue; the cause is that when hardware acceleration is enabled via CSS on the image, it doesn't re-render the image when zooming in.

So it may not even be "solvable" - other libraries have said it's a problem with mobile Safari that would need to be fixed on their end.

I've found a very quick workaround - in setZoomStyles, changing the translate3d and scale3d CSS to their 2d forms to prevent hardware acceleration. This is of course 'slower', and other libraries have decided against doing this - but for my use case it at least works, so is probably what I'll go with.

Edit - gah, it works on my demo page but not main website. I guess something else must be triggering hardware acceleration :( If anyone can even think of a hack that works, I'd be all ears.

Hey @smerriman,

Really sorry for the delay. Yes, got busy with some other task.
But, this is my highest priority task now.

When are you releasing your product? I'll try to complete before that

Hi @sachinchoolur ,
do you have any news about the issue?
Its a must have for our customer.
Otherwise we have to switch to another plugin.

Yes, it is completed. doing final testing..

@sachinchoolur when can we expect update? It's very important feature for my project

Releasing a new version with the fix today or tomorrow

The issue has been fixed in version 2.6.0-beta.1

I'm really sorry for the delay and thank you for your patience!

I'm still seeing the same (or a very similar?) problem on 2.7.1-beta.0. What I'm seeing is that the zoom is sharp when I double tap the screen to get to the max zoom, but when I pinch zoom into a state that is zoomed in but not all the way, then it's still blurry.

Hi guys!
Has anyone found a good solution to this problem mentioned by @fw42 ?
I'm having the same problem here, if I pinch zoom the image is still blurred, but when I zoom 100% the blurring is no longer there 😵‍💫