This is an old website, build on WordPress but there is a bug only on mobile devices ( cant replicate with dev-tools ). When you are scrolling down, sometimes it automatically brings you up at start of the page, sometimes it's Ok but after scrolling a little bit UP, again it jumps to the start of the page.
Could someone please help or guide me on that.
Website -> here
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 have this wordpress website and don't want the browsers URL bar on mobile devices. It's taking away so much space, especially if the smartphone is in horizontal position. I already searched for solutions on the web but it didnt work as it should. Maybe I just forgot something and couldnt see it.
So the thing should be like this: Once the users interacts (touch, scroll) the URL bar should disappear and should appear just if the top of the page is reached again. So it should be a fullscreen experience.
Now it is working like this: When user is scrolling down and then scrolls up, the URL bar appears even if the top of the page is not reached. And this is something I dont want...disturbs a lot and takes away the whole space needed.
This should work on iOS and Android too.
Thanks for any help!
Now it is working like this: When user is scrolling down and then scrolls up, the URL bar appears even if the top of the page is not reached. And this is something I dont want...disturbs a lot and takes away the whole space needed.
You will have to live with it. This is a core browser behavior, and cannot (and should not!) be overridden by web sites.
So this error is related to scroll effect.
As I open my website (https://bobobee.com) on a mobile browser and scroll down, it often gets stuck and bounce back.
This started happening after I enabled Auto Adsense Ads on the site. I am not able to figure what exactly is causing this error and how to fix this bug.
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 :(
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.