scroll anchoring on non-chrome browsers - javascript

Hi there, I'm trying to implement an infinite-scrolling blog, and have the functionality working in terms of loading and rendering. However, I'm getting jumpy performance on non-chrome browsers due to content being dynamically rendered as the user scrolls.
I found that it works perfectly in chrome due to the scroll anchoring functionality (https://developers.google.com/web/updates/2016/04/scroll-anchoring), but other browsers like safari or firefox not so much. Does anyone know how to go about emulating the scroll anchoring functionality so that the infinite scroll functionality works on all major browsers?
I really appreciate any thoughts or suggestions!
Thanks!

Related

Laggy jittery user experience when updating top/bottom value using javascript scroll event

I am trying out this new implementation where I am updating some div's bottom/top value to emulate fixed position using javascript with scroll event. The problem is while scrolling the div's are getting a fixed position but moving little bit up/down depending on scroll direction. Had to do it this way as I used transform scale. So CSS position fixed doesn't work. Any optimization advice will be very helpful.
the code is here --> Alternative of position fixed using JavaScript shows weird behavior on window resize
If you check my page on desktop/laptop you can experience that. It depends on a lot of variables like how powerful the device is, browser to browser. I am hoping that if anyone has access to MAC OS on safari and chrome or Windows chrome or any desktop/laptop with a decent browser on it may check the user experience and leave a comment about how laggy jittery is it? Is it like okay or bad?
the webpage link --> https://elomymelo.com/soundcore-motion-boom-plus.html
All you need to do is, scroll down half of my page clicking the link above on desktop/laptop. The right side content should get fixed. But may have jittery behavior on scroll. And please leave a comment about how bad is the experience?
Thanks for your time. This will help me a lot to figure out if I should implement it on the other pages or not. Any optimization advice will be very helpful.

Stuttering Translate3D when using rellax.js on mobile browsers

I am currently working on my portfolio site, and I wanted to have some kind of parallax effect. So after I researched I bit, I found rellax.js, which claims to work on mobile browsers too. But now when I view my site on a mobile browser, it is stuttering. I was wondering if this is an Issue from my site, or if it is a general problem with this plugin(even though the example site of rellax.js works perfectly fine on mobile Browsers).
Where to look (and how to recreate) for the stuttering effect: The plugin affects the Header part of the site as well as the card that is somewhat overlapping the header on scrolling. To achieve the effect just scroll the site down and up.
I hope I provided enough information about my problem. The problem can't be recreated on a site like jsfiddle or codepen, because I don't know what is causing it.

How to make a website that uses fullpage.js go fullscreen on Safari for iOS

I'm working on a wordpress website that uses the fullpage.js plugin.
My main goal is to make it go fullscreen on iOS devices, latest versions are the main targets. By making it go fullscreen I mean getting rid of the ugly top and bottom bars, as you can see on this picture, in landscape mode those bars take up more than 25% of the space.
I've tried this, but of course all browsers are compatible except safari iOS.
I've also tried all tips I found on here like including the meta "apple-mobile-web-app-capable" but nothing seems to work.
On Apple devices in Safari, getting rid of the anchors option of fullPage.js will do the trick.
Not sure about other mobile phones or browsers, but it is well known browsers don't provide a way to deal with those bars and therefore there won't be much you can do about it.

Android browser floating menu issue while fast scrolling

I have a problem with fixed floating menu on android phones browsers (not tested on other phones) and still can't find any solution.
Let's take this as an example: (the first link I found on google)
http://www.backslash.gr/demos/jquery-sticky-navigation/
Scrolling and clicking on menu works, but if I make fast scroll and let the scroll stop automatically 'til it reaches phone browser's bottom or top, the floating menu becomes inactive (not able to click on floating menu, focus-link position is changed). If I make fast scroll and stop scrolling by touching the screen (don't let the scroll to reach bottom or top and stop automatically) the floating menu works and links are active.
I have tried about 10-20 examples I found on google, even bootstrap has the same issue.
Also tried libraries like mCustomScroll and iscrool, but they are too slow for phone browser or have other issues.
Tested on android > 4.x several different phones and versions.
I hope you understood the problem and can suggest anything.
Also it would be nice if anybody could test it on iphone (but I think its Android problem).
Thank you.
Found good enough solution https://github.com/filamentgroup/Overthrow/
So I was able to create fast scrolling page and make workaround for described bug.

jQuery animations not working / behaving strangely in Internet Explorer

I'm developing a personal website, http://www.miketurley.com.
In any Webkit browser (Chrome, Safari) or Firefox, when you mouse-over the text on my site's opening screen, you get a slick animation which slides the text around and reveals the menu ("waking up" my website.) This may not be too necessary, but I like it and I think it's appropriate to showcase skills like that on my portfolio website.
Anyway, if you go to my website in Internet Explorer, the animations do not appear at all. The same duration of time goes by, and then the page "snaps" into the post-animation state in one frame, with no motion in between.
How can I fix this?
An explanation of this particular animation along with source code is available here: http://www.miketurley.com/index_explain.html
Leaving eval aside, you site is failing to quirks mode in IE. Using dev tools I switched to different Document Mode and the animations ran just nice. Can't find out what activates quirks right now but you have an issue to investigate. Start with passing the strict validation or moving to transitional or html5 <!doctype html>

Categories