[Scrolling up/down quickly on mobile makes screen jump to position further down the screen]

So the solution was to isolate the mobile experience - the desktop/tablet version works as expected as well. This looks like further proof of the effects of invoking .refresh() multiple times due to resize. Thank you @Jack for the help! Code update below for reference:

 

// APPLY INLINE DISPLAY PROPS TO STICKY NAVS

		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

		var isiBottom=$('#isiBottom');
		var isiRight=$('#isiRight');

		// SCROLL CONTROLS FOR BOTTOM ISI

		var isMobile = {
			Android: function() {
				return navigator.userAgent.match(/Android/i);
			},
			BlackBerry: function() {
				return navigator.userAgent.match(/BlackBerry/i);
			},
			iOS: function() {
				return navigator.userAgent.match(/iPhone|iPad|iPod/i);
			},
			Opera: function() {
				return navigator.userAgent.match(/Opera Mini/i);
			},
			Windows: function() {
				return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
			},
			any: function() {
				return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
			}
		};

		  if(isMobile.any()){

			gsap.to("#isiBottom", {
				scrollTrigger: {
					trigger: "#isiAnchor",
					scrub: true,
					start: "top bottom",
					end: "top bottom",
				},
				display: "none",
				ease: "none",
			});

		  } else {

			$(window).on('resize', function(){
				var win = $(this); //this = window
	
	
				if (win.width() >= 1900) {
	
					$(isiBottom).css('display','none');
					$(isiRight).css('display','block');
	
					gsap.to("#isiRight", {
						scrollTrigger: {
							trigger: "#isiAnchor",
							scrub: true,
							start: "top bottom",
							end: "top bottom",
						},
						display: "none",
						ease: "none",
					});
	
				} else {
					
					$(isiBottom).css('display','block');
					$(isiRight).css('display','none');
	
					gsap.to("#isiBottom", {
						scrollTrigger: {
							trigger: "#isiAnchor",
							scrub: true,
							start: "top bottom",
							end: "top bottom",
						},
						display: "none",
						ease: "none",
					});
	
				}
	
			});

			$(window).trigger('resize');

		  }

		$('.collapse').on('hidden.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

		$('.collapse').on('shown.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

 

[Scrolling up/down quickly on mobile makes screen jump to position further down the screen]

The fix did not work entirely. How would you counter this affect on mobile?

[Scrolling up/down quickly on mobile makes screen jump to position further down the screen]

A change in the order of the code appears to have done the trick. ScrollTrigger.refresh may have been called before registration of the plugin. Although, a number of browsers seem to be more forgiving, in this case, Safari on iOS is not. The method calls were moved after registration and behavior appears to be fine. Thank you.

[Scrolling up/down quickly on mobile makes screen jump to position further down the screen]

Hello All. The following is plaguing me. I have two scrollTriggers that work based on screen-width. No issues on desktop, but, on iPhone Safari, we are seeing the a side-effect when the user scrolls quickly down and, then, up to the top again. Quoted report below.

 

"It happens both with the menu toggle and with the drawer tab.

Sometimes I don’t have to click anything, I just scroll up quick the viewport snaps down lower on the page.

It seems as if it’s trying to compensate for positioning on the page and that gets screwed up when you scroll too fast. Maybe something to do with the sticky ISI?"

 

Code below:

 

// APPLY INLINE DISPLAY PROPS TO STICKY NAVS

		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

		var isiBottom=$('#isiBottom');
		var isiRight=$('#isiRight');

		$(window).on('resize', function(){
			var win = $(this); //this = window
			if (win.width() >= 1900) { 
				$(isiBottom).css('display','none');
				$(isiRight).css('display','block');

			}
			if (win.width() <= 1899) { 
				$(isiBottom).css('display','block');
				$(isiRight).css('display','none');
			}

			ScrollTrigger.refresh();
		});

		// SCROLL CONTROLS FOR BOTTOM ISI

		var windowWidth=$(window).width();

		if(Number(windowWidth)>=1900){
			gsap.to("#isiRight", {
				scrollTrigger: {
					trigger: "#isiAnchor",
					scrub: true,
					start: "top bottom",
					end: "top bottom",
				},
				display: "none",
				ease: "none",
			});
		} else {
			gsap.to("#isiBottom", {
				scrollTrigger: {
					trigger: "#isiAnchor",
					scrub: true,
					start: "top bottom",
					end: "top bottom",
				},
				display: "none",
				ease: "none",
			});
		}

		$('.collapse').on('hidden.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

		$('.collapse').on('shown.bs.collapse', function () {
			ScrollTrigger.refresh();
		});