Screen flickering when open panel/popup in Cordova app

Using 2.0.10, Anyone have the same problem in iOS11? There is no such problem in Safari

Looks like it only occurs when the main view is scrollable

Anyone can help or have the same problem?

Screen flickering right before the popup open when the view content is scrollable:

Screen flickering right before the panel open when the view content is scrollable:

@nolimits4web can you please help, tried to found the solution but no luck, the flashing occur in below scenarios:

  1. Only in iOS PhoneGap environment, no problem in mobile safari
  2. Main view content is scrollable
  3. Occur when open panel or popup

Many thanks

Finally found out where is the problem, seems it can be solved by removing the following CSS, it seems no other side effect and I will create a pull request, cheers!

It was inspired by this post that it’s an iOS bug.

html.with-panel .framework7-root > .views .page-content,
html.with-panel .framework7-root > .view .page-content {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}

html.with-modal-popup .framework7-root > .views .page-content,
html.with-modal-popup .framework7-root > .view .page-content,
html.with-modal-popup .framework7-root > .panel .page-content {
      overflow: hidden;
      -webkit-overflow-scrolling: auto;
}

Weird, i remember this bug was in previous iOSes, and I can’t experience the same on my iOS 11 devices. Do you use UIWebView or WKWebView?

Actually this styles are required to prevent page scrolling behind the panel and its overlay

I am testing in a iPhone 7 Plus with iOS 11.2.5, using PhoneGap Developer app or built with PhoneGap Build got the same problem. (Should be UIWebView right?)

I remember the page scrolling problem when panel is opened (in V1). After removed the above CSS, the flickering problem is gone and without the page scrolling problem. I believe the backdrop already prevented the scrolling problem in V2.

Backdrop doesn’t prevent this problem if you scroll over panel itself. It still will scroll page behind it

Interesting, need further study on that but certainly the flickering problem is annoying.

Just tried to use an iPhone X with iOS 11.2 in PhoneGap developer app also got the flickering

Try the WKWebView plugin

Thanks! Will take a look on wkwebview, anything I need to pay attention to?

It may not work if you have local XHR requests )

But is the router using local xhr?

Just tried using wkwebview in PhoneGap build, it only show a white screen after splash screen, any hint?

By local I mean XHR to local files, so if you have in your routes “url” pointing to local files then it won’t work due to Cors policy. You can try then ionic-wkwebview plug-in for Cordova, it has fixed this issue

1 Like

Thanks for introducing the cordova-plugin-ionic-webview plugin and it works like a charm.

The official cordova-plugin-wkwebview-engine doesn’t work because it don’t allow local xhr, i.e. F7 router load page with path file://xxxxx/www/page.html is prohibited and the ionic plugin solved it.

Also the flickering problem is gone, and the response and user experience is much better than using UIWebView, thanks again.

1 Like

Hey @robinyip , Can you please tell me the name of the ionic plugin, which is used to resolve the file:// problem, thanks a lot!

That is cordova-plugin-ionic-webview