I have created a ionic tabs project using ion-tabs component. But the issue is when user clicks on tab icon, tab is not changed immediately. It takes 1-2 seconds to switch the tabs.
HTML Code:
<ion-tabs class="footer-tabs" selectedIndex="selectedTabIndex"#footerTabs>
<ion-tab tabIcon="list" tabTitle="'Notice'" [root]="noticepage"></ion-tab>
<ion-tab tabIcon="book1" tabTitle="'Homework'" [root]="homeworkpage"></ion-tab>
<ion-tab tabIcon="calendar1" tabTitle="'Event'" [root]="eventpage"></ion-tab>
<ion-tab tabIcon="list-box1" tabTitle="'Attendance'" [root]="attendancepage"></ion-tab>
</ion-tabs>
If I create new tabs project, then the component is working fine. But its giving issues in my project. I also tried by removing methods called on the ionPageDidEnter() for all the pages.
Does anyone know what could be the possible issue ?
I have debugged and tried to find possible issues. The issue was because of ion-list on pages , which was causing delay in tab switch. When I reduced ion-items to 30, performance increased. I implemented infinite scroll to avoid the performance issue.
thats is mostly dependant on how you load your pages and how you compile your project
try to lazy load you pages and compile your apk with ionic cordova run android --aot --minifyjs --minifycss this helps in making you app run much faster.
Related
I use Angular 5.2.6 and Clarity 0.11.11 and for some reason, with SSR, Clarity Icons are empty while, in the browser, they're perfectly displayed.
I followed the instructions to specify the files to include for both server app and browser app, multiple times without any changes. No errors are shown.
Do you have any advise? Any clue?
Any idea to see what's happening while SSR?
Sample of result with Angular Universal: <clr-icon _ngcontent-c21="" shape="check"></clr-icon>
Thanks
I am using a bootstrap 3 template and have noticed on some that scrolling is not smooth and kind of bumpy. I am not even sure what to look for. This only happens in Chrome. It does NOT happen in Safari or Firefox.
Is this a javascript or css problem? I have never run across this before.
This seems to happen worse in Chrome for mac, but also happens in chrome for windows.
It seems to happen when I make the window smaller and then make it bigger again. If I leave the window the same size, it seems to scroll fine.
Link:
http://demo.phppointofsalestaging.com --> Click Sales then resize the window in Chrome and then scroll down and then up. You will notice it is very bumpy and not smooth
:root { scroll-behavior: auto; }
Add this simple code to your custom CSS file.
"scroll-behavior" declared as "smooth" in bootstrap css/bootstrap.reboot.css.
So we need to overwrite it using our custom css.
The problem is in the jquery.nicescroll plugin that is used with the theme, the function jQuery.fn.scrollTop make the problem, it takes more than 75% from the cpu when run. my solution is :
You are using the jquery.nicescroll plugin version 3.4.0 use the latest version currently version 3.5.0 available.
If not working as expected, downgrade to version 3.2.0 I'm using it with my site without any problem.
Also check that if the hwacceleration in the Configuration parameters of the plugin is set to (default: true).
Update 1:
nicescroll plugin is a solution to have a custom scrollbars compatible with desktop, tablet and phone devices and to override the default scrollbars of the browser " more information her ", "you didn't see the diffrence because the plugin used in your project works when your browser window under 767px" so another solution if you don't need it you can remove the plugin from your files by following this steps:
Delete the plugin file (jquery.nicescroll.js) from your script folder.
Delete the plugin link from all your files.
Delete the plugin function lines (21 to 36), (49 to 66), (149) from (unicorn.js) file.
Update 2:
I made some tweaks for the (unicorn.js), download it from her, then replace your original one.
Hope this will help you.
I have a similar issue to xcode 4 + phonegap ... not update JS upon build? but with the inclusion of Sencha Touch.
The problem is html changes are recognized but changes to javascript files are not seen when running the app in the simulator. Here's a quick list of suggestions made in the post listed above, none of which worked for me:
update and save .plist
touch www
clean project (Command+Shift+K)
clean build folder (Command+Shift+Option+K)
Deleting the app from the ios simulator and relaunching works but that quickly becomes a hassle. Sencha Touch takes care of its own caching using localstorage. Even though they give you the ability to define the caching strategy in app.json, I haven't found a configuration that works.
Here are the versions I'm using.
XCode - 4.3.2
PhoneGap - 1.6.1
Sencha Touch - 2.0.1 FINAL
If i understand your problem correctly i think it has something to do with HTML5 application cache. Take some time to study a little on how HTML5 Application Cache works here.
The reason your changes are not being reflected is maybe because the hash values in the app.cache file is not being changed... For the js file you wish to get changed change the hash value in comments to anything you want... This would ensure that the browser does not read the HTML & JS files from the cache but would rather download the new updated version...
When you are reloading the page in browser open the console you would get an idea of the updating process...
Hope it helps...
I'm starting my first PhoneGap project and am developing using Visual Studio and Windows Phone 7, although I intend on ultimately deploying to iOS and Symbian as well.
However, I'm stuck at Step 1. I have added an image to the www/images folder, and put the following code:
<img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" />
And I get:
It works fine when I preview it in IE9, but I don't have a Mac to test it on iOS yet.
It's worth noting that the JS files and CSS have loaded fine, it's just any image (whether referenced in CSS or an <img> tag) always comes up broken.
My guess would be the Build Action of your image file is incorrect.
According to http://wiki.phonegap.com/w/page/48672055/Getting%20Started%20with%20PhoneGap%20Windows%20Phone%207#4Reviewtheprojectstructure section 4. You should be setting the Build Action of your images etc to Content which simply copies them into the output project when it is built. They are probably currently set to Resource or None.
To change the Build Action right click a file and choose properties to go to the properties window if you do not already have it open. It is probably then the first property. Just click and choose the correct one.
I'm posting this to questions that I found while trying to find my answer to the same problem. The JS framework I use adds a url query to each image when in a debugging mode (in order to force browsers to reload image, instead of using cached). So, my image "image/background.jpg" would be accessed as "image/background.jpg?d=34342233". But, when running on PhoneGAP for Windows Phone, it won't recognize the image, and thus it shows up as broken. So, I had to turn off debugging for the framework I use, and suddenly the images showed up (still, don't forget to set the Build Action to "Content" as mentioned earlier).
It looks like IE7 doesn't reload the latest version of my stylesheet each time I upload a new version on the server.
This is annoying as I am debugging my .css file to make it work on IE...
Tried to empty the browser cache but still not working.
Thanks for your help.
Ctrl-F5 - forcible way to reload in IE
Include your version number in the file name. myfile_v1234.css
When testing, every time you do an update you can just wite "stylesheet.css?r=98123"
As long as the query string is different, it'll be downloaded again.
If you need, you can use javascript to append Math.random(), to get the random number. Not required on production though, when updates would be stable.
2 Questions:
Does IE eventually load with the newer stylesheet?
How are you saving the changes to the server (SSH, Web Interface, etc.)?
I ask because I ran into an issue with a web-based file management system a while back where one browser would show the CSS just fine, the other wouldn't, and we noticed the issue of which browser played nicely depended on which browser we used to upload the CSS.
The reason turned out to be that IE gave the CSS file a different MIME type than Firefox. If you continue to notice the issue even when you've cleared the cache, check the MIME type of the file using Firefox by going to Tools > Page Info.
Also, if it is simply a caching issue, consider turning caching off in IE. I believe this should be an Advanced Option under Internet Options.
Also, you may want to try creating a special developer environment for IE (if it comes down to it.) Perhaps have another machine with IE7 and no caching and any other features turned off (A kiosk mode, perhaps), and then previewing the page on that machine.
Thanks to you all!
I did manage to solve my problem with the "stupid" Ctrl+F5, and by changing the Internet Parameters of Windows to reload content every new visit.