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.
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 am interested in hearing from anyone who has experienced this problem in the past or has any idea what the cause might be.
I am using the FullCalendar V3 library and when I click on the more events pop over the scrollbar does not work and I cannot scroll down to see all of the events.
The scroll bar does not work on Google Chrome Version 87.0.4280.141 however I have checked it on Firefox 84.0.2 and it scrolls ok on that browser.
I have not changed any of the library code and I have the impression it is some JavaScript that is the cause but would not know where to start.
Thank you in advance for any ideas.
Below is the popover in question:
This is caused due to a chrome smooth scrolling issue. Assuming you have no control over the browser side and therefor cannot disable that feature. Applying this to the scrolling container inside the popup should fix the issue.
pointer-events: auto !important
Note the selector I used was.
.fc-more-popover .fc-body.fc-widget-content .fc-event-container
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
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.
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