Background image flickering when moving between pages

This forum contains topics that were moved from Get Satisfaction
Suda
Posts: 0
Joined: Sat Oct 11, 2014 9:11 pm

Background image flickering when moving between pages

Post by Suda »

Hi Kateryna

Really sorry about this. I had to change this project, so the new link is as follows:

http://appery.io/app/mobile-frame?src...

Steps to reproduce:

  • Slide left/ right in the initial screen
  • It will navigate between two pages
  • But always the background images seen like flickering while loading (Can see the theme color behind while it loads)
  • The same behavior observed in native app after installing the APK in a device.
Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Background image flickering when moving between pages

Post by Kateryna Grynko »

Hi Suda,

Each time you open a page it is displayed anew.
We recommend that you untick "Render all pages in one HTML file (jQuery Mobile multi-page template)" option in App Settings.

Suda
Posts: 0
Joined: Sat Oct 11, 2014 9:11 pm

Background image flickering when moving between pages

Post by Suda »

Hi,

Did you want me to tick that? Pls note that already I had this unticked. Attached screenshot.

Image

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Background image flickering when moving between pages

Post by Kateryna Grynko »

Hi Suda,

Let's try, this will make your app load pages faster.

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Post by Matt Scott »

I have the exact same issue.

My background images are different on each page...
The sizes:
600x960 dimensions
file sizes are varied: 350 kb, 180 kb, 250 kb

But, I have always checked, tecked - "Render all pages in one HTML file (jQuery Mobile multi-page template)"

I have never tried it without ticking here. I will try that and let you know.

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Post by Matt Scott »

update:
tried it both ways - "Render all pages in one HTML file (jQuery Mobile multi-page template)" - checked and unchecked. no noticeable difference.

Louis
Posts: 0
Joined: Wed Nov 05, 2014 2:03 pm

Background image flickering when moving between pages

Post by Louis »

Have you tried changing the format (jpg,png etc.) of the images or checking if they are all the same?

Also flickering can sometimes occur if the page is loading something out of the container. Have you tried adding codeoverflow:hidden/code to the css class?

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Background image flickering when moving between pages

Post by Evgene Karachevtsev »

Hello!

"Render all pages in one HTML file (jQuery Mobile multi-page template)" completely eliminates this problem. There is a small delay when you first load the page. Please check it out again.

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Post by Matt Scott »

Hi Evgene and Louis!

Thanks for your help!

@Evgene, Although, in theory, Render all pages in one HTML file (jQuery Mobile multi-page template) should fix the issue. It does not. I have selected Render all pages in one HTML file (jQuery Mobile multi-page template) for months. That has been my selection all the time I have worked on this project. I only tried un-checking today. I agree it should fix it. But it doesn't.

Perhaps, the issue is with the background being larger than the container - as Louis mentioned. This is necessary for the project, as the larger background gives a nice moving effect on phones, and is the correct size for tablets.

Since I am using javascript to bring in the background, how would you recommend for me try the "overflow:hidden" idea?

I can also try jpg instead of png. Will check tomorrow

Thanks again!

Louis
Posts: 0
Joined: Wed Nov 05, 2014 2:03 pm

Background image flickering when moving between pages

Post by Louis »

Hi Matt,

If you haven't already assigned a CSS class to the background you could do so using:

code$("#selector id").addClass("class name")/code
Obviously changing the first and second part to match yours.

But in general, I prefer to use CSS to add background images etc (I know you tried this earlier).

Just to add: Did you try render in one page when you were only using CSS to manage the background? Maybe JS is causing a delay on slide?

Post Reply