Pin Spacer on iOS

[EPDev]

Hi,

 

I’ve attached a demo of the .pin-spacer causing a jump animation on mobile when i scroll upward on mobile devices. It works smoothly on desktop.

 

iOS Safari has a feature that results in window.innerHeight providing different values based on whether or not the URL control and menu bar are expanded.

 

Link to Demo

codesandbox.io

I didn’t use codepen because it puts the demo in an iframe. It wouldn’t be able to reproduce the bug on mobile.

 

Link to Video

iOS Bug

In the video, you can see the inline height and padding styles of the .pin-spacer are changing based on the direction I'm scrolling.

 

How to Reproduce

Go to my demo on an iOS device or the simulator on a mac

Scroll down a bit, stop, and then scroll a little in the opposite direction to allow the navigation to reappear.

Device - iPhone 12 Pro running iOS 15.4

 

What I’ve Tried:

I’ve tried updating the .pin-spacer height and padding within the onUpdate method of the ScrollTrigger, but GSAP library still fires its sendResize function.

 

I’ve also read these threads that said this issue is caused by rendering and the main thread being handled differently on mobile - but I think its caused by the safe area.

Layered Pinning Bug

Pin Spacer Height on Mobile

ScrollTrigger Jumping

 

Assumption

In the GSAP codebase, the functions below are fired when the inline styles of the .pin-spacer are updated. The navigation/menu expanding because of scrolling on iOS could be causing a browser event that is continuously firing getDocumentHeight() - which will update the .pin-spacer with the wrong values.

function getDocumentHeight() {
  const { body } = document;
  const html = document.documentElement;

  return Math.max(body.scrollHeight, body.offsetHeight, html.offsetHeight);
}

function sendResize() {
  const height = getDocumentHeight();

  if (lastHeight !== height) {
    dispatch({ type: 'resize', height });
  }

  lastHeight = height;
}

function initializeDOMMutationListener() {
  if (
    typeof window === 'undefined' ||
    typeof window.MutationObserver !== 'function'
  ) {
    return;
  }

  // Listen on document body for any change that could trigger a resize of the content
  // When a change is found, the sendResize function will determine if a message is dispatched
  const observer = new MutationObserver(sendResize);

  observer.observe(document, {
    attributes: true,
    childList: true,
    subtree: true,
  });

  window.addEventListener('unload', () => {
    observer.disconnect();
  });
}

 

Any help would be greatly appreciated!

[OSUblake]

Welcome to the forums @EPDev

 

The address bar coming in and out view is supposed to be trigger a resize so that's expected. You can keep iOS from resizing the screen on scroll using the CSS here.

 

https://greensock.com/docs/v3/HelperFunctions

 

Also, Safari is going to add some new units to deal with viewport sizes.

https://css-tricks.com/the-large-small-and-dynamic-viewports/

 

[EPDev]

Hey @OSUblake!

 

Thank you for responding! The CSS solution doesn’t work for my use case. I’m starting the page with a pinned scrollTrigger and the css solution is scrolling inside a fixed element to stop safari from resizing. That would work for content in regular flow but I got a result of a completely locked page on desktop and mobile.

 

However…

 

I found a solution. On mobile nothing can be a dynamic size based on the view. Your divs and your scrollTrigger end values need to be hardcoded pixel heights.

 

My Solution

On page load - get the window.innerHeight and set it to a css variable you will use on your divs

This will set the proper heights for any mobile device.

Then in your scrollTrigger - your end value needs to be a pixel amount - not a percentage based value.

Once you scale up to desktop screen sizes you can go back to using vh and percentages if you like.

 

Demo Here