Framework7: PhotoBrowser HD images glitch on iOS style

[tinyCoder32]

Hi, there is a problem with the photo browser when browsing high quality images, if you swipe left and right the images will be cropped with white background:

Problem appears on these tested situations:
Cordova 4+ application (Default UIWebView) on iOS 10.2 (Simulator and Real Device).

Problem does NOT appear on:
Desktop browsers
Safari mobile
Same application but medium size images

Animated video below describes the problem:
http://sendvid.com/uhz0mrv8

What do you think causing this issue?
Thank you.

[ZanderBrown]

Can you give further details about the images in question?

[tinyCoder32]

Sure, here is one:

http://2.bp.blogspot.com/-M298MMcZs04/VpeZ2wlh4CI/AAAAAAAAOys/hHoRW7_F4kk/s1600/4.jpg

[oudoken]

Hi,
See also https://github.com/nolimits4web/Framework7/issues/1253
It's the same problem.
If You use lazy loader then ALL the images will be display correctly the first time (with lazy), btw the problem will represent when going to an image already loaded (no lazy).
When double tapping and/or zooming (pinch/punch) the image will be correctly displyed.
Seems a glitch.
Thanks Bye
Roberto

[tinyCoder32]

Yes! it is exactly the same problem!
We hope to find a fix so soon.

[ZanderBrown]

@valnub & @nolimits4web any thoughts?

[valnub]

Very weird, seems to be a WebView engine rendering issue. If I remember correctly there is an option to switch to a different WebView engine which behaves more similar to Safari but I don't remember how it was called.

Maybe @macdonst knows something as this is Cordova-related?

[valnub]

Also, I think the problem might be because Swiper has to calculate the size of the image being displayed based on the space available. If this space has not expanded yet, it will calculate the wrong size. That might be the reason why lazyloading option helps because it will do the calculation later when the correct parent width/height is available.

Just a guess tho

[tinyCoder32]

@valnub I have lazy loading Active but I still have the same problem.
You are right about it is Cordova problem as I don't see the issue on CrossWalk webView on Android, the advanced webView for Cordova on iOS "WKWebView" was having a bug and I couldn't test it, seems they finally made a fix 5 days ago and I will try checking this with the WKWebView engine.

https://github.com/apache/cordova-plugin-wkwebview-engine

[valnub]

I don't remember if this relates to Cordova but I heard from others that it's possible to switch from UIWebViewController to SFSafariViewController if this is the problem.

[tinyCoder32]

@valnub I'm already using SFSafariViewController in the example video I'm showing above.

https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller

A nicer / cleaner UI which is consistent with Safari and all other apps using a SFSafariViewController.

[oudoken]

@valnub Maybe just adding the same lazy calculation to non-lazy images will solve the problem?
Thanks

[valnub]

I rather think that it needs to be waited until the parent container has fully expanded to its final width/height and then render the image.

[seme1]

I'm also suffering from the mentioned bug. I am using WKWebview by the way.

[tinyCoder32]

Is there any update on this yet? @ZanderBrown

[shatle]

+1

[krislao]

also encountering same issue. :( any update on this?

[froamer]

Hi, I've just discovered the same issue and my whole app is based on this.

It's been a while, is there an update on this? If not, can you point me in the right direction to investigating fixing it myself?

[froamer]

This seems to be a work-around until there is a proper fix:

onSlideChangeStart: function (swiper) { swiper.updateSlidesSize() }

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue