In my Titanium IOS app I have a ScrollableView populated with several WebViews.
When scrolling slowly between views everything works fine and I'm able to see the views as they slide back and forth.
However, when trying to scroll fast (by flicking the screen) the ScrollableView gets black almost immediately, giving me no feedback of whether I'm scrolling or not. Even though the ScrollableView goes black it still scrolls though.
Maybe flicking isn't supported? Any help would be appreciated.
Related
We're trying to build a chat view in React that behaves like WhatsApp or Telegram: First, it should show 20 initial chat messages, and if users scroll up, additional messages are being loaded.
To make this happen, we remember the position of the first message on top, load more messages before it, and then scroll back to that message to keep the scroll position where it was (and thus prevent the content from jumping).
This already works perfectly on Desktop and Android browsers. But when we try it out on Safari iOS, the browser behaves pretty weird. Sometimes it jumps to the wrong position, and sometimes the whole messages disappear. They will re-appear once you scroll the page again with your finger.
Does anyone know the reason for this strange behavior and/or a solution for this? We've been searching the web for months now.
(Bonus: Any hint to a working (!) React component that allows lazy loading of content on top of a list while pertaining scroll position reliably on iOS would be highly appreciated. We tried quite a number of them, but none worked.)
So I've built a website and everything is going fine except one thing. When you go to the shop page on a mobile and hit "filter products" (only visible on screens up to 1000px wide), the filter menu that slides out doesn't scroll.
If you try it on your laptop using the mouse wheel it will scroll fine, but go on your phone (or get the chrome inspector to mimic a touch device) and you'll see it doesn't scroll any more when you touch the screen, only with the mouse wheel.
Here is the page in question: https://growitmowit.co.uk/shop/
I have tried ripping the css & js out but once you've clicked "filter products" and the menu has slided out you cannot scroll (with touch) until you slide the filter menu away.
I've now spent hours trying to figure it out and need some help :) Thank you in advance.
oh yeah - sometimes, when you first open the page with the inspector in device mode it is fine. If that's the case refresh the page and it'll start playing up :(
I am working on a PhoneGap web app for iOS.
I have an implemented an infinite list, where as you scroll down the page, new elements are loaded from the server and added to the bottom of the page.
Each element added to the page includes images that are loaded asyncronously.
However, the images do not actually appear until after scrolling stops. This makes things appear sluggish, even though they are not - ie until I remove my finger from the device.
Does anyone know of a workaround for this problem?
This funky work around for safari will do the trick for you:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
This will add the translate property to all elements causing the IOS browser to render your off screen elements and give you a silky smooth native like feel. Remember to check your functionality as it can mess with positioning of some elements. If if does add them to the 'not' list e.g:
*not(html, button, img...
This cannot be avoided. Image rendering on webkit-gradient IOS is executed in a dedicated US thread with real time priority.
https://news.ycombinator.com/item?id=3316383
I've noticed the same problem while building my application. The UI consists of many images and it only appears to render what's currently on the screen and when you go to scroll, everything else won't render until it's finished scrolling.
A solution that worked for me was adding an overflow: auto; property to the containers in your layout. When I add it, everything renders and there are no problems when you scroll.
http://jsbin.com/nesiside/1 (code is available http://jsbin.com/nesiside/1/edit)
If you scroll down in the document and click the "Lock/Unlock" button, an overlay with text will appear. You'll notice that the scrollbar length has been changed to accommodate the overlay height, not the original page height. Click "Unlock" in the overlay, and you return to the original page, in the previous scroll position.
System works great on desktop browsers, and on my Android phone, however, on iOS there is a rendering flash flash when the overlay is triggered or removed. Ultimately, I believe it is the fault of the scrollbar changing.
I've attempted the usual tricks to resolve iOS rendering issues (webkit-backface, transform3d), with no success.
Apparently, showing the content and hiding the overlay (or vise versa) was to much for the iPad 4 to render at once, causing the flash. This is odd because I tested it on an old Kindle and my Android phone and both are handled it fine with their slow processors.
To resolve the issue, I put the the scrollTop() method (used to return the user to the previous position on the underlying page) inside a requestAnimationFrame function. The result isn't perfect (content can be screen scrolling for a fraction of as section), but it is a much better result than an entire page flash.
This isn't a specific JS code issue, but more the way iOS deals with JS that is causing more problems on my site than most others.
On iOS only (it doesn't happen on Android) if I'm natively scrolling (up/down) and then try to activate some JS just before the scroll has finished (very quickly) then it completely ignores the JS.
I believe that Apple do this so that the UX always remains priority (don't let any crappy JS slow down the user), but in this case it's just a very simple piece of JS that I want to allow to run.
As an example, if a user is scrolling and then quickly presses a tab at the top of the screen that opens a fixed navigation panel then it won't register if the native scroll is still happening. If they press it again (the scroll has finished) then it works.
I'm also using a JS slider to scroll horizontally through images and if I try to scroll left/right just before the native up/down scroll has finished it sort of jumps and isn't good UX. I think it's prioritising the native scroll but still activating the horizontal scroll with some sort of delay.
It's not a massive problem, but not perfect. If everybody slowly navigated the site and waited for the native scroll to come to a complete stop, it would be great. But of course people won't do this.
I don't think preventing the default behaviour will do anything. I have tried to take over the native scroll before on iOS and I just don't think you can.
I think this may actually happen on many sites. I've just tried to find a good example by visiting stackoverflow.com on an iPhone and if you scroll quickly and then quickly hit a link before the scroll has finished it won't register. I don't think text links are as big a UX issue though, but a horizontal slider and big 'open menu' button at the top are much more likely to be hit quickly before the native scroll has ended (as you don't need to read something before you press it, like with text links).
I have various JS scripts on a site that would benefit from this being improved in iOS, so if I can understand a way around it, why it happens, what is going on, then I can apply individual fixes to each of those scripts.
Thanks.
The problem is not that iOS ignores javascript while scrolling (more precisely, while the scroll momentum is active). The problem is that, while that happens, iOS does not really register the position change of elements on the screen. In fact, if you have a handler attached to the scroll event, it will stop firing the moment you stop touching the screen, and then will fire just once when the scrolling stops.
Consequence? You think you're touching a link, but you aren't. The image on the screen has moved up or down, but, to the broswer, everything is on the same position, so, actually, you aren't touching anything (or are touching something different). I got very annoyed when I found this behaviour because, in my case, my page is full of images that are links to a gallery ... and if you touch them while scrolling, the gallery opens showing you not the image you touched, but another (The one that really was on that position when your fingers stopped touching the screen).
Is there a workaround? The only one that I know of is disabling the scroll momentum, but you lose scrolling performance.