In my application there is a chat where if the user scrolls up, more chat messages will be loaded. I use ionic's default "infinite scroll" (position = 'top') component to detect when the user has reached the top of the page to load more messages into the array. On the browser and on android this works very well with a threshold of (50% or 550px), but on iOS (native device and emulator) I get a weird issue that can be seen through the image. The red represents the part of the screen the user sees and the black represents the total scroll length. As seen in iOS since the scroll view shoots to the top, it triggers the infinite scroll many times from one call, which is not ideal. It also creates a poor user experience with the screen jumping to the top and not being able to follow the previous messages. I've tried disabling scrolling but that did not work. iOS also does not seem to detect the infinite-scroll threshold and only triggers when at the top of the scroll-view. I also tried upgrading to WKWebView, but that did not solve this issue.
Platform Info:
ionic-angular: 3.20.0
ios platform: 4.5.4
Without seeing any code, it seems like you're probably pushing the loaded data to the end of your list rather than adding it the beginning. You want to do:
this.chatMessages = [ ...newContent, ...this.chatMessage ];
Are you manage to solve this ?
Mine scenario is
1- after scroll top
2- infinite scroll is activate and call the ionInfinite method.
3- result added to array list
4- automatic trigger scroll again
5- and repeat step 2-4 until.
Related
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.
I'm in XCode 6.1.1 and iOS 8.x
As pictured, I have a map, and a tableview that shows details about a particular property on the map. There is also a toolbar along the top (blurred) that has up/down arrows on it to move to the next property, which basically rebuilds the tableview and refreshes the screen.
Well notice the weird square that's about 1.5" x 1.5" in the center of the screen.
That square quickly appears and disappears in the center of the screen when the screen is refreshed moving from property to property.
I have no idea where that view is coming from.
Is there an instrument in Instruments to catch this view in the act so I can figure out what it is and where it's coming from.
I've used the Time Profiler, but I don't recognize anything in the backtraces that helps me figure out where this mystery view is coming from, and I don't believe it's being created by any of the code in my app, which makes it more troublesome.
If this was your app, how would you figure out where this mystery view is coming from?
I found the answer within an Instruments time profile backtrace... turned out there was a third party activity indicator buried deep in some code.
Dooh!!
Instruments to the rescue once again.
The setup
I have a UICollectionView that allows the user to page through pictures, 12 to a page. There are upwards of 200,000 pictures that should all be available in the app. I'm not expecting a user to scroll to page 20,000, so there's function to jump to a certain page.
The problem
In landscape orientation, paging breaks down on page 16,385. The collection no longer adjusts to the page boundary. If you go back before page 16,384, you can get it to start working again, but no page past 16,385 works.
My delegate also stops getting scrollViewDidEndDecelerating: the message when the bug shows up.
The hypothesis
Page 16,385 in landscape orientation happens to start at pixel 16,777,216 which happens to be 2^24. I think that there's something in UICollectionView or UIScrollView that breaks past 2^24.
Is this just an undocumented limit? Am I out of luck?
The example
I've uploaded a project that demonstrates the problem. Here's the relevant view controller. If you shake your iPad or the simulator, you'll be taken to page 16,384, one page before the bug shows up.
The snark
If you don't think a user should need to be able to go to page 20,000, that's cool. I don't think it's relevant to the question.
I'd say this is an undocumented limitation and would file a Radar bug report, attaching the sample project as evidence. If you are looking for an alternative method, you could try using a UIPageViewController with a collection view for each page. You can choose the swiping animation, rather than the default iBooks-esque animation, and replicate your sample project very closely.
You could just load say 10,000 pages and when the user jumps, load an appropriately different 10,000 pages.
I wonder whether you've tried using multiple sections? Is the limitation per section or for the entire CV?
I am working on a project for iPhone (flash builder 4.6), in which I have to implement a custom scroll component.
Basically I have to show the Facebook users in a list render-er, scrolling is working fine initially but when the number of friends increases (more than 300) the scrolling freezes (mainly tapping not working, swipe is still working, I mean to say that MOUSE_MOVE event is not working properly here).
If any one have any idea about it, please share with me.
You need to create (or use an existing) list component that uses a virtual list. i.e. only creates enough cells (or renderers) needed to fill a screen. It then recycles the renderers as you scroll.
Have a look at this:
http://madskool.wordpress.com/2011/06/30/tutorial-3-lists-and-pickers/
Or if you are using stage 3D, http://feathersui.com/examples/components-explorer/
I am facing a strange issue with screen scrolling on 9810 device and simulator.
I have a complete order screen, which is shown when the order of the user is confirmed.
At the top there is Vertical Field Manager which contains another VerticalFieldManager ( containing Label Fields and buttonFields ) and a FlowFieldManager (containing images).
Now the problem that i am facing is that whenever i scroll the screen up and down , there are many gray lines appearing on the screen. It seems as if there is some screen refresh issue with the device. I tested on previous OS (4.5, 4.5 4.7 5.0) version, everything is working just fine on them. The problem is arising on OS version above 6.0 .
While the correct screen must be like
As you can see these gray lines appear whenevr i scroll screen up and down. Any ideas how to rectify this issue ?
In the first image, it looks like you are trying to add a shadow effect at the top of the screen. The vertical field manager uses some graphics optimization to improve scroll performance. Instead of repainting everything, it picks up the pixels on screen in the layout area, and shifts them. This works so long as all the painting code is relative to the virtual extent.
Certain UI effect, like a shadow effect, are relative to the screen, rather than the virtual extent, so this optimization picks up those effects and copies them elsewhere, which looks bad. It also tends to look just like your first image.
There are two ways to fix this:
Turn off the optimization. Override isScrollCopyable to return false. Your visual problems should go away, but scrolling performance will suffer.
Don't add UI effects on top of a scrollable area.
I am very sorry for the late reply. However i fixed the issue by myself. I just overrided the paintBackground method in my class and inside that i wrote graphics.clear(). This seems to fix this scrolling issue. I will try Michael method too though.