So I'm building a rendering system for my app that pulls objects from a collection and runs em through js templates to create more children while the page is being scrolled. Essentially it detects when the bottom of the container is reached and removes the top row of rendered elements and appends a row of templated objects to the bottom of the container, and likewise but reverse for scrolling to the top.
The functionality itself isnt an issue. I've got it working 100% in chrome, but the issue starts in other browsers. In chrome, its as if the container scrolls forever, but in safari/firefox when the scroll hits the bottom, the new rows are rendered, but the scroll stays at the bottom so it looks like the last row is constantly being replaced by the next row to render.
My question is how can I determine the differences of how the scroll is operating so I can figure out a solution?
So the difference that was happening was that chrome had a new feature they built in called scroll anchoring. They added it so new content being added to pages would not jerk the scroll around. It just so happened to be a missing piece of the rendering system i was building that wasn't missing only on chrome. I emulated what it was doing in my own code now it works right on all other browsers.
To anyone curious, chrome has a css control to that behavior called overflow-anchor: auto or none;
More info about "Scroll Anchoring"
Related
I'm aware of this question, but it seems to address a different issue.
In my case, scroll snapping doesn't always work together with anchor links (or the scrollIntoView method) only when the scroll box is html (and not body or main or some other container). I have an iPhone XR with iOS 16.
Here is a CodeSandbox to easily test on the phone. (I didn't include a code snippet in the post, as this is best to be experienced full screen, on the phone.)
When I make another container the scroll box, scrolling 'away' the address bar in Safari doesn't work anymore, and since I like this feature, I'd prefer to have html being my scroll box.
Is this really a bug or am I doing something wrong?
I'm having an issue with scrolling being somewhat temporarily disabled on mobile iOS devices within a fixed position element. The issue is somewhat described (but not answered) here: iOS scrolling with fixed position
I've searched everywhere, but it seems my issue is somehow unique, as none of the solutions helped (such as setting the elements to absolute instead of fixed, or setting -webkit-overflow-scrolling to touch. I've tried all solutions posted here: Scrolling issue on position fixed element on iOS)
The website I work on is currently live with the issue, so I can easily provide a codebase to test: https://finanztip.de
If this page is opened in an iOS device (all other browsers and OS's are fine), when the navigation is opened and scrolled (usually I can reproduce it by scrolling to the bottom of the container and attempting to scroll back up), sometimes (not always) the scrolling is disabled and the user can't continue scrolling for a while.
I assume it has something to do with the scrolling context. The iOS device is trying to scroll in another element/context other than the one I need it to scroll in, and while it attempts to scroll somewhere else, it doesn't scroll in the context I need it in (in my case I want the div with the class "vertical-scroll-container" to be scrollable). If I remove the class "vertical-scroll-container", it scrolls just fine.
I have a video of the issue, but I can't upload it to stackoverflow, so I'll send it to anyone interested, or I might upload it somewhere and link it.
I'm not sure if I provided enough information to understand my situation. In case something's missing just let me know.
EDIT: Here's the video: https://www.dropbox.com/s/wh4oe99f5tlxzjs/ios-scroll-issue.MOV?dl=0
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
Over the last couple of weeks or so Chrome seems to have had an update that is making the page resume scrolled down in the middle. Moving between list and form pages on out site it resuming in the middle of the page.
Even basic form pages when you click save it is leaving the page at the bottom so you don't see the standard bootstrap record saved confirmation message at the top.
This is making Chrome unusable for our product demos etc. and causing a massive headache.
I have tried going in to chrome://flags/ and 'Scroll Anchor Serialization' off but had no affect.
I have also tried adding overflow-anchor: none; to the body tag but also didn't help.
Is there any other way of being able to disable Chromes auto scroll resuming on pages so that all pages load at the top of the page. It only seems to be Chrome and only seems to have started happening in the last couple of weeks. We are now getting to the point that Chrome is not usable as a browser on our site when it used to be the most reliable for demos.
In the end we have had to add:
<script type="text/javascript">
window.scrollTo(0, 0);
</script>
To every page which isn't the best solution but it works.
I have a div with a vertical scrollbar containing mixed content. Some plain text, images, tables, some other visual markup.
There seems to be a couple of points scrolling down the page where it gets "stuck" in Chrome (also tested Firefox, it seemed slightly slower at that point, but not broken), with the scroll wheel or up/down arrows only moving a couple of pixels at a time. I have no listeners for the scroll events on this page.
How do web browsers decide how fast to scroll at various points when dealing with mixed/complex content?
I suspect this could be a performance issue with the rendering of components. I recommend using the Timeline feature in Chrome Developer Tools to capture the performance information and go from there.