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.
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.)
I've been researching how to prevent Safari's feature of swiping at the edge of the screen to navigate to previous/next pages in browser history. I have an application that uses Hammer.js to pan an image, and on mobile the image takes up the whole screen. So if the user happens to start panning at the left edge of the image, for example, it forgoes that by ignoring my little javascript app and instead going to the previous page. I haven't found anything saying it is actually possible to prevent this edge swipe feature...though I did find this: https://gist.github.com/mountainstorm/9430618. However, all it seemed to accomplish for me was breaking mouse scroll functionality.
Any help would be greatly appreciated. Thanks!
I don't think it can be done since it is an OS level feature. As long as the swipes initiate inside the web page, there should not be any issue. If you have sufficient margin from the edge, then it should not be a problem.
I have an issue with jQuery ScrollTo.
It skips and there is a lag when applied to my page.
Here's a link to the jsFiddle example that works and here is the same code applied to my page that does not work.
It might function correctly on some machines but all the machines I have tested this on don't!
Might there be an issue with the amount of images I am using?
Is there anything I can do to overcome this?
The problem there is the background image. On "poor peformances machines", using a full page background image like you did and scrolling is not very efficient.
For instance, my machine at work lags as hell on your page, either using the top menu or regular scrollbar. On the otherhand, my MacBook Pro handles your page perfectly with a smooth feel when using the top menu to scroll.
I tested it using chrome on my machine, and removing the background image using developers tools. It now works perfectly. As soon as I put the background image back, it starts lagging again.
Its a bit jumpy on my machine (your site that is), but one thing i noticed that may help is that it is really nice and smooth smooth if i very quickly click back and fourth between 'Senior Executive' and 'Experienced Hire'.
Is there any callback or some calculation being done before, during or after the scroll perhaps?
Can anyone please tell me how they accomplished disabling the "bounce" effect in safari on the iPhone without disabling scrolling completely? I've googled the crap out of this and i can't find a working solution.
i've tried the following:
<script>
function BlockMove(event) { event.preventDefault();}
</script>
-> this just completely disables scrolling
i've also tried scrollFix.js, and i don't want to resort to using iScroll4 or any bloated JS library. I'm stubborn but there has to be a reliable easy way to fix this right?
The only thing I can think of is you need to detect when to stop the bounce, so when you want to stop the bounce then disable scrolling.
For example - I am moving my finger down which actually moving the page content up, you need to detect if the page ha reached the top, if so then disable scrolling. When you detect the touch is moving up which means the content is moving down then enable scrolling again unless you hit the bottom of the page.
I am assuming this is the bounce effect you are talking about. It's default behavior I don't think you need to get rid of it, unless your client wants it and will not change his/her mind
I have a site, which upon clicking an image a lightbox pops up (eg http://www.huddletogether.com/projects/lightbox/).
Our customer still has some machines which run IE6 (upgrading is unfortunately beyond our control), so in order to block out some SELECT elements, I have used the old IFRAME shim trick (as described here: http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx).
However, I have the following problems:
The lightbox doesn't appear until the mouse is not longer hovering over the page - moving the mosue to a different window, or even just to the scroll bar causes it to appear;
While the mouse is over the page, the following doesn't happen:
Any jQuery animations related to the lightbox stop (or to be more precise, the animation continues in the background, only to have finished upon mouse out);
Animated gifs inside the lightbox stop running until mouse out;
Javascript in general stops until mouse out.
Everything seems to run fine in our other supported browsers (IE7 and FF).
Unfortunately I don't have a link to show you these effects, but hopefully I have explained myself enough for somebody to help (which will be very gratefully received)!
Edit:
Forgot to say, I know this is related to the IFRAME, as removing it causes the javascript to run fine, but obviously the ugly SELECT boxes bleed through the top DIV.
It sounds like you have something heavy running in a mousemove or mouseover event handler that's blocking animations, animated GIFs, etc.