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 there,

I'm developing an app where I use different background images in each pages. If we slide left/ right, the new page will be loaded. When we go to the next page, the background image is seen flickering and this looks ugly while using it.

I tried both by setting the CSS when page loads and by having a CSS for the mobile container which specifies the background image- but the result is same. Could you please let me know why this is happening and whether there is any resolution?

PS: The same behavior was there even testing with APK file after installing in a device.

Attached the image where the Cappuccino theme (brown) is visible behind the white image which is loading on top of it.

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,

Probably you use too big images. What is their size/dimension?

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

Background image flickering when moving between pages

Post by Suda »

Thanks for the reply. I have defined the pages as 640x960 in Appery and I got 3 images as follows. The issue is there for all three of these unfortunately :(

  1. 640x960, 100kb

  2. 640x960, 850kb

  3. 640x960, 350kb

    Do you recommend any background image size/ resolution according to the page dimension defined in appery? Pls advice.

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,

Most probably images are being loaded too long. Could you please try testing on device as a native app?

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

Background image flickering when moving between pages

Post by Suda »

Hi Kateryna

Thanks, not sure you missed that part in my initial post- Actually the same behavior is observed in native app as well. I exported as APK and installed in my Android mobile. It make sense to see the loading effect as web page, but I'm mainly worried why it give same issue as native app as well. Pls advice.

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,

Are these files inside your app or on a third-party server?

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

Background image flickering when moving between pages

Post by Suda »

Hi, the images are inside the app. I've used the images which I uploaded using media manager in appery.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Background image flickering when moving between pages

Post by Yurii Orishchuk »

Hi Suda,

Please give us your app public link and describe steps to reproduce this problem.

We will take a look.

Regards.

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

Background image flickering when moving between pages

Post by Suda »

Thanks Yurii. Pls find the public URL and steps to reproduce below:

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

Steps:

  • 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 while it loads)

  • The same behavior observed in native app after installing the APK in a device

    Clue:

    Through some forums I assumed CSS preloading the background images might solve this and tried like below. But it didn't help for me. Pls see if this approach could be used, but I'm not sure the way I preloaded is correct.

    body:before {
    content: url() url();
    display:none;
    }

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,

When opening this link, we get:
pre"Page not found (404) https://appery.io/app/error/404.seam"/pre

Post Reply