Page load flickers on PhoneGap iOS app - javascript

My PhoneGap application uses slide in and slide out animations using entirely CSS animations.
You can find the project I based my app on here.
As you can see from the demo the slide transition is quite smooth, but as soon as I add images, after the new page is loaded it flickers/blinks for a fraction of second. The interesting thing is that all the UI elements are shown on screen and then the flickers occurs. More, sometimes the page scrolling becomes buggy and it doesn't let me scroll to the bottom of the page where my images are.
I cached the images using CSS to improve image load but again no luck.
I also found on different blogs about a similar issue on JQ mobile and tried adding without luck:
webkit-backface-visibility: hidden;
You don't know how much I appreciate your help I spent my whole Saturday trying to figure this out.

After some hours of fiddling I realized that the issue was because of the scrolling mechanism and fixed header which are poorly supported by -webkit browser. I am now using iscroll 5 and the issue disappeared.

it is due to you JS files
if you load the more js file on html page then it will take time you will find the filck in phonegap application
when you develop application in phonegap then try to use single page architecture to develop application that must be the better option
even i am suffer this problem.

Related

Safari much slower than other browsers

I am trying to build a Wordpress website using a theme I purchased, unfortunately the maker of the theme doesn't seem to respond to any support requests.
After creating a few pages I noticed that performance is much worse on Safari compared to any other browser. I tested this on a few computers and few versions of macOS.
Example page is https://sochacki.info/proj/nepal-manaslu-circuit/
I realise that photos on the website are quite big (4000px each), but that is exactly what I want. I am happy with how quickly the pages load and how the galleries work, in Chrome, Firefox or Opera. When you click on a picture it loads PhotoSwipe JavaScript gallery so you can see them in full size, and then you can also click in top right corner to go full screen as well, or to leave the PhotoSwipe viewer. Switching between photos, going full screen or leaving PhotoSwipe are instant.
However when I load the same page in Safari, any action after clicking on a photo is slow. Switching between photos, going full screen, leaving full screen. It all takes a second or a few seconds. I can also see in Activity Monitor that CPU is used way more in Safari.
I tried a couple of things:
the theme I am using uses a custom plugin made by the same author to create these galleries, place photos and it includes PhotoSwipe files inside. Those files were one version behind (4.1.2 instead of latest 4.1.3) so I updated them, but the performance issues are the same.
I installed some other gallery plugins which use PhotoSwipe to display photos, and they did not have the performance issues, so I am not blaming it on PhotoSwipe, probably some other part of the plugin is causing the issues.
I have no real experience with JS or web development, are there any tools that could help me find what is causing the slow performance?
I checked the website speed - as I can see the Theme-Loading-time is okay. But as you already mentioned the Photo-sizes are really unfortunate as we can see in google page insights (https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fsochacki.info%2Fproj%2Fnepal-manaslu-circuit%2F)
Try to resize the Photo-sizes in normal view (not the HeightxWidth > the kB)

Website Loads CSS / Jquery styles slowly

I have a website i'm designing right now, and i'm new to using JQuery. I'm noticing on my slick-carousel slider that the slides and styles adjust them self's while the user is loading the page for the first time in the browser. I have a few media-queries in place for different resolutions, and it seems that it has to adjust.
Is this because of the way i wrote the code, or is this something that happens with Javascript? What's the best practice to avoid this?
Here is the site link - Advanced Litho Website Re-design
Look at this URL: https://gtmetrix.com/reports/www.advancedlitho.com/aCuNhAl7
Here you can see that your images are huge in size. GTMetrix is showing that scaling your images properly can give you a boost of 1.9MB
Do whatever is said on the test and you should be fine.

HTML5 Phonegap Mobile app slows down over time?

I'm having a rather complicated problem.
I've built an HTML 5 app that uses socket.io to pull numbers from a server. Those numbers are then used in HTML5 canvas animations.
I have a pull-down refresh that pulls the numbers again and re-animates the canvases.
The problem is this, the animations (including the pull down refresh animations) slow dramatically over time on the ios simulator.
In other words, the app initially loads perfectly, and the animations for everything work find for a couple of seconds. After a few seconds, the animations become slower and slower until the simulator all but freezes.
Does anyone know why this is happening? I thought it could be a javascript loop but I don't really have any? Is this strictly a simulator problem?
It depends on you code, but probably it should be a simulator issue.. do you use a specific JS framework like jQuery or Bootstrap?
Check some recommendations to use jQuery + PhoneGap..
http://forum.jquery.com/topic/fine-tuning-jquery-mobile-phonegap-app

Android Phonegap Scroll is Very Choppy

I'm building a very basic webapp that displays ferry schedules.
I'm using phonegap to port it to a "native" app on Android and I'm have a bit of trouble with the scrolling.
It works perfectly in Chrome on the device, as well as on the android browser. I've tested on several devices and they all work great in browser. As soon as I put the project into Phonegap however the scroll becomes very "choppy" and skips and sticks. I've added a video link to show you the behaviour:
http://youtu.be/D18s9kgnD7g
I'll give you a brief explanation of how it works:
We're using translate3d CSS methods for transitions when we switch content in view so that we avoid using page transitions. Because of this we're not scrolling the actual page we're scrolling individual content divs so that we avoid weird scrolling bugs when switching between content views. Basically we have three "content views" on one page that switch out when we want to switch views.
Here's a link to the app:
http://ferriesapp.ca/app/
Things I've tried
We're using "overscroll: scroll;" one these content divs, which I know had some incompatibilty with Android pre 2.3 but should be good now.
We've tried a few big libraries, like iScroll and Scrollable, and things like that to no avail.
I've tried preventing default actions for touchmove.
We've coded correct touch events using Zepto's touch module.
I've tested on devices from the Nexus one (4.0.4) to the Nexus 7 (4.3) and it's the same story on all those devices.
Any help would be STRONGLY appreciated
I've been struggling with this for a while now and I can't seem to find anything on the internet that hits on this "choppy" scrolling bug.
EDIT: Here's a logcat from installation to when the scrolling bug happens:
http://pastebin.com/Aa7mDeAX
You got a pretty nasty style sheet there. First, you do not want any box shaddow because mobile does not like that. Then, since you have a lot of blank spaces, you want to help touch to work better with those blanks with user-select: html.
* {
margin: 0;
padding: 0;
-webkit-user-select:html;
-khtml-user-select:html;
-moz-user-select:html;
-ms-user-select:html;
user-select:html;
}
That should help with your scrolling, but you still have tons of thing to clean up with that CSS. Another issue is that you don't even have cordova loaded correctly, but that probably doesn't really matter for scrolling.
Actually, what is zepto_002.js? That seem to be the one that is causing the main scrolling issue.
As a fellow google play developer, having "three "content views" on one page that switch out when we want to switch views" is not a good idea. my only input though if you want to go this path would be to check this out http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

jQuery.BlackAndWhite.js erratic on mobile?

I have been redesigning my WP portfolio website of late and have been playing with a neat little aesthetic jQuery plugin, BlackAndWhite, Which turns all of the images in my gallery view black and white and makes them recolor on hover using the HTML5 canvas.
I noticed one bug with the plugin is that if it runs before the images have finished loading, it will sometimes only grey-scale half of an image. So I have been using another tiny plugin to only run the script after I'm certain that the images have finished loading. see waitforimages.js
The initialization script is the following:
jQuery(document).ready(function(){
jQuery('.bwWrapper').waitForImages(function(){
jQuery(this).BlackAndWhite({
hoverEffect : true // default true
});
});
});
where bwWrapper is the wrapper around each img.
Now this works really nicely on most computers and browsers that I have tested thus far. Everything works the way it should. However, when I opened the site on my android, I noticed that only 50% of the images recolored. When I refresh the page, again only 50% go black and white, though it is different ones each time. Making the site fully responsive to mobile is still on my to-do list, but I have noticed this fairly blatant, yet difficult to explain bug.
Any idea what might be causing this?
You don't need to preload the images because the plug in aleady do it. Try to download the last version of the script on github https://github.com/GianlucaGuarini/jQuery.BlackAndWhite and if you still have problems send me a private mail with a link so I can check what could be the problem.

Categories