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

Background image flickering when moving between pages

Thank you Yurii,

Again, it doesn't work.

I did as you said.

On my first page, the Toosl page,

  • Load, Run Javascript,

  • added your code, (with my additional images)

  • created css asset
    added your cacheImage code.

    then I tried it with all my pages using the css method for bringing in the background images... (same as before)
    adding a class name to mobilecontainer, example: class name: bglaw1

    and then create css file, backgroundcontrol, with each class name:

    .bglaw1 {
    background-image: url(../../../../files/views/assets/image/bglaw1phone.png);
    background-repeat: no-repeat;
    background-size: cover;
    }

    and i tried with my pages using the load, run javascript method: (same as before)

    Tiggzi('mobilecontainergod1eng').css('background-image','url("' + Tiggzi.getImagePath('bgextra1.png') + '")');
    Tiggzi('mobilecontainergod1eng').css('background-repeat','no-repeat');
    Tiggzi('mobilecontainergod1eng').css('background-size','cover');

    It doesn't matter what I try, EVERY TIME the output is the same:
    See the video here:
    https://www.youtube.com/watch?v=-W8y2...

Ihor Didevych
Posts: 0
Joined: Wed Nov 19, 2014 7:55 pm

Background image flickering when moving between pages

Hi Matt,

Such problem occurs every time when 'page show' event hasn't completed it's work, but user navigates to different page.
Our advice would be: 1) Remove setTimeout or change it to setInterval inside 'page show' event handler.
2) Do not allow user navigate to different page until all services that were called from 'page show' event or 'page load' are not finished. You can set mask with opacity 0.7 and show preloader until everything is over.
This isn't Appery.io event handling problem, it's standard JQM behavior.

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

Background image flickering when moving between pages

Hi Ihor,

Thanks for your comments and assistance.

What you shared is in fact true about this problem happening in other cases - when page show does not not complete its work.

But, the problem in my project, however, does not happen only when there is a fast transition to the next page. It happens all the time.

I quickly navigated from page to page in the video, to simply make the video short.

The same problem happens even if I wait for 5 minutes before I navigate to the following page. The page show event has long since completed, but still upon navigating to the next page, the problem is still there.

It happens every time I navigate to the page FOR THE FIRST TIME since opening the app. Of course, whenever I navigate backwards to a page that is already opened, there is no problem, because the image has been cached.

This is why I am surprised that the cacheImage code solution above did not work. it should work, but for some reason, does not.

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

Background image flickering when moving between pages

I just discovered that the code given above had some errors...

Notice it has an "h" in the word Cache.

var imagesToChache = [
"files/views/assets/image/purplebackground_600.jpg",
"files/views/assets/image/bgl4_600.jpg",
"files/views/assets/image/bgextra2_600.jpg",
"files/views/assets/image/redbackground_600.jpg"
];
var body = jQuery("body");
for(var i = 0; i < imagesToChache.length; i++){
var currentImage = jQuery('img class="cacheImage" ');
currentImage.attr("src", imagesToChache);
body.append(currentImage);
};

Now I changed it to:

var imagesToCache = [
"files/views/assets/image/purplebackground_600.jpg",
"files/views/assets/image/bgl1_600.jpg",
"files/views/assets/image/bgl2_600.jpg",
"files/views/assets/image/bgl3_600.jpg",
"files/views/assets/image/bgl4_600.jpg",
"files/views/assets/image/bgextra2_600.jpg",
"files/views/assets/image/bgextra1_600.jpg",
"files/views/assets/image/redbackground_600.jpg"
];
var body = jQuery("body");
for(var i = 0; i < imagesToCache.length; i++){
var currentImage = jQuery('img class="cacheImage" ');
currentImage.attr("src", imagesToCache);
body.append(currentImage);
};

It still doesn't work. So I must ask, are there any more errors in this code?

The behavior is still exactly the same, no matter what I try. The pattern is the same also. It repeats the same way for each page, every time I open the app.

Thank you again.

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

Background image flickering when moving between pages

Another test I have done. Interesting. So, the problem is not the background image itself. Something else is causing this.

When I completely remove the background image, and I simply use a background color, with this simple code:

.bgmanythings {
background: #ff0000;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

the same effect is produced. the color initially only fills a part of the page, the upper portion of the page - and then it extends down to the rest of the page after a 1 second "flash."

as seen in the video here:

https://www.youtube.com/watch?v=-W8y2...

Thanks so much!

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

Background image flickering when moving between pages

Hello Matt,

Unfortunately code debugging is outside the scope of our support.
You can use one of two options here http://appery.io/services .

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

Background image flickering when moving between pages

I sincerely thank you Evgene for your help. You are always very courteous and helpful.

However, here - I must just laugh at this point. The other option is disgust and anger - but that would not be honoring to God or encouraging to anyone. And iI know you all are doing your best, and I appreciate it. So, laughter is better.

I would like to share my opinion and feelings on this if you don't mind... From the viewpoint of the customer - suggesting to pay a ridiculous sum of money for extra support for this issue is completely unacceptable. Why?

Because I am using ONLY code suggested by the appery staff in the documentation, and in these forums. (Every variation and different possibility of code suggested by multiple employees for that matter). I am using a standard theme, supplied by appery. Therefore, in my opinion, these things should always be under the scope of appery support.

If I had something that was custom, that I found from another source - then I would completely agree with you. I should pay extra. But, I have nothing that is custom. I am doing only what I have been instructed to do, by appery staff.

Let me say - I understand that the appery platform works within the boundaries of phonegap. I understand that. So whatever problems phonegap has, appery therefore must have. And the staff here are doing their best to provide solutions. For that, I am thankful.

I must say that it is just extremely frustrating and disappointing to be told a million different things by the staff, and for none of the solutions to work. If my issue was dealing with something strange or custom, I would understand. But, it is simply dealing with a few background images and transitions. I just expected this simple task to be very standard and 100% guaranteed to work - after a number of years of existence of phonegap and appery.

What I am learning after so many problems and headaches with very simple issues is that - the jquery mobile/phonegap solution is just not the level of product I expected it to be.

In any case - thanks for your efforts. You are a friendly and helpful staff team.

***********

Finally,
After all these messages back and forth, I have discovered that the background images and/or colors are NOT the problem at all.

The root of the problem is in the page transitions. When I remove the "slide" transition, the background images appear immediately and perfectly. When I use a "no transition," it works perfectly.

When I go back to the slide transition again, the problem of a partial white screen flashing appears again. This is proven true - because the problem occurs when I use a backdround image, or a simple background color.

I discovered this on my own through many possible options and testing/debugging. And after my discovery, I did a quick google search and learned that this a standard problem with phonegap and slide transitions.

Then I did a search here on the appery forum. And I discovered that this question was addressed a year ago. Very simply, the question was asked and answered...

"is there a way to continue use "slide" transition and overcome this blinking issue?"

Answered by Maryna...
"No unfortunately."

https://getsatisfaction.com/apperyio/...

So I am left wondering why... Why in all these last few weeks of headache and back and forth, and attempt at trying different options for background image codes, why did no one point out that the issue is not the background image - but it is an issue with jquery mobile, TO WHICH THERE IS NO SOLUTION.

Many headaches for both your staff team and for me could have been avoided. It seems to me to be a big oversight by the staff, and one that could have been avoided. I am disappointed, and would suggest that your team listen to these comments and look for areas to improve your service.

In any case, no one is perfect. And I still appreciate very much all your efforts and attempts to build a quality platform and product. Thank you for allowing me to share this honest feedback. I hope it will be beneficial to someone down the road.

Now I just need to consider if I will continue and use the jquery mobile/phonegap solution and appery service, or if it is simply unable to produce the quality of app needed for public use.

Thanks again,
Sincerely,
Matt

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

Background image flickering when moving between pages

Matt,

Thank you for your feed back.
We glad that you have found the solution for your issue. Indeed, JQM has a lot of unpredictable glitches, that is why Appery.io platform will be not using it soon. Upgrade to edge versions and keep it as legacy.

Return to “Issues”