I'm using sencha touch 2 in my ios app. but the tab panel is too slow, there's is one tab that contains a lot of content, but all the tabs are slow (there's a lag between when the tab is hilighting and the page transition and it takes ~1 second to switch).
I tried the deferredRender parmater but it didn't help.
How should i write my tabPanel to make it faster?
Note : the same page switches tabs faster on android, although in everything else android webview is slower
Thank you
This question is quite similar to yours:
PhoneGap 1.4 wrapping Sencha Touch 2.X - What about performance?
As I said in that topic, generally Android's transition between views is faster but other effects (especially scrolling) are much slower than iOS.
Right now the only solution I've known is to keep your DOM light-weighted. Don't try to create all views that might appear in your app and call them later through setActiveItem() because it enlarges your DOM so terribly. When you switch to a new tab, I recommend that you should destroy all other tabs' child components (and only keep some variables if you want to restore their states when switch back).
Related
Is there a way in Chrome and Safari on iOS to restrict scrolling to one direction at a time? In other words, if I start scrolling an element vertically, I want to turn off the user's ability to scroll horizontally until the vertical scrolling is complete. And vice versa.
In iOS native code this is called directionalLockEnabled, and in Microsoft browsers it's -ms-scroll-rails.
Does something like this exist in CSS that Chrome for iOS (or Safari for iOS, because they use the same rendering engine under the hood) will recognize?
If not, is there a javascript solution available, ideally a React-compatible npm package?
If you're after a pure CSS solution, unfortunately there is nothing in the spec for locking scroll to a single axis at a time.
There are some great points on this thread, including some vanilla JS solutions if your use case requires locking the scroll behaviour to one axis at a time.
I am dealing with a weird bug on Ionic's iOS native build where I sometimes cannot swipe back or switch tabs once I transition to a new page using router.navigateByURL(...), and trying to debug this issue has been troublesome since I can't "see" how the gestures are handled. Does anyone know where I should be looking in the code for handling transition gestures?
Here's a video demo of the problem: https://streamable.com/hk9c0
In the video, you can see me:
Swiping down to refresh using the ion-refresher element and you can see the page beneath (already entered a bug report for that part: https://github.com/ionic-team/ionic/issues/18284 )
Trying to tap the back arrow in the left corner
Attempting to swipe left to right to go back a page (hard to show that one)
Tapping the bottom tabs to transition to new tab, at one point, I tap on a tab that has an ion-fab element which appears in the bottom right because its z-index is higher than the "stuck" page.
Currently the best I've been able to do is by looking at the css classes that are added to the pages, but it's not much use....
Where app-release is the page you can see in the video and app-home is the page underneath the stack. It's my understanding that Ionic uses hammer.jsfor gestures, so I added it as a tag, please correct me if I am wrong. I cannot, for the life of me, recreate this bug consistently, but will often trigger 1 out of 50 tries.
I've been digging through the utils in Ionic Core to see where elements are being added and removed, with no luck.
I created a bug request for this here as well: https://github.com/ionic-team/ionic/issues/18305
Are you using #angular/animations to make the transitions between the pages? I had some issues like yours, as you can see in my question.
Router navigate on Ionic with animation blinking on ios using angular animations
If I am right about the use of #angualar/animations I suggest to use a custom animation of the Ionic itself, and not te angular's. You can see an working example here of its use here:
https://github.com/mhartington/ionic4-custom-animation
Since I have less tem 50 rep I cant comment so I had to post this anwser not knowing if it was really your case. Hope it helps.
One of our Appcelerator apps is experiencing rendering delays on IOS platform for the screens where there are multiple widgets (customised textfields to meet client UI requirement) being displayed inside the scrollview.
The screens are making use of ScrollView where these custom controls (Widgets) are displayed inside the views. We are seeing the delay in the following scenarios:
When the screen is having quite a few controls displayed (around 10-15 controls).
It is observed that the rendering time it takes and any changes to this control properties while the page is loading (such as setting some properties by calling the methods on the widget) is resulting in extra 2-3 secs delay.
When these controls are dynamically added into the page - say in response to the question by the user we display additional controls to capture the information.
We have seen a clear lag in this case which is not good from the user experience perspective.
Note:
All of these issues are only on IOS platform whereas the same code works pretty good (without any lag) on Android platform.
Tried out using the tableview in place of scrollview but the result is no different.
Using tableview also results in poor scrolling performance.
As some complex views are created and added dynamically, using listView would be challenging.
Can anyone let me know if any of you are aware of such issue and how it was resolved (in any appcelerator project)? Is there any way on the native front setting some property/native code through a module that would help speed up the rendering on IOS?
We are only developing for iPads and iPad Minis using iOS 7.1.1+ using Titanium SDK version 5.1.2 (We have tried latest SDKs, but they haven't solved our problem).
I am working on an app in which there are several screens and each screen has the same layout, just different data passed in, then I want the user to be able to swipe from one screen to the next.
So far I got something working using the UIPageViewController project template using the transition style UIPageViewControllerTransitionStyleScroll. What I have done so far works ok, although its resource intensive because it instantiates a new view controller each time I swipe to a new page but I am loooking into working around that.
The thing I am concerned about is that it is not strictly a page application in the sense of ibooks so even though I am able to make it look like a scrolling app, using the transition style setting, I wonder if there is a reason why people seem to only use this template for book type apps, unless I am mistaken
Also there seems to be an alternative approach of using a UIScrollView and PageControl to do similar functionality
http://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html
I am not sure which approach is better to solve the problem I am trying to fix, so am looking for some feedback. Each page will need to be a separate instance of a view controller as there are several elements to display on each page.
Using UIScrollView is much more difficult. If you're targeting iOS 6 you should almost certainly use UIPageViewController. If you're targeting iOS 5 then UIPageViewController might not be perfect because the only page transition available is "scroll" which looks like a page flip.
If you're worried about the resource usage, you can reuse view controllers.
See the WWDC 2012 session 223:
https://developer.apple.com/videos/play/wwdc2012/223/
I've been developing an iPad web app over the past three days, and I'm trying to have internal horizontal scrolling, without allowing the rest of the page to move/zoom in ect. Essentially I want to lock it to specific co-ordinates, whilst allowing certain elements to scroll. If you're on an iPad you can see it here: http://streamerforipad.webs.com/app.html. It'll look kinda weird on a desktop. Also, sorry for my abysmal coding skills, I plan to clean it up with external CSS at some point.
P.S. Remember this is a web app so native code is a no-go.
Thanks!
You can disable scrolling within certain element areas using the following:
$("element,element2").bind("touchmove",function(e){
e.preventDefault();
});