Pin Feature on Mobile Shuttering/Glitchy on scroll

Hello,

I am working with pinned sections on my project description pages for both desktop and mobile versions of my squarespace site.  The desktop pinned elements are working perfectly on scroll, but when I switch to mobile I noticed the pinned elements start to reload and position themselves again as the scrolling slows in a jittery manner (I've attached a screen recording of the mobile site example page).  Does anyone have a solve to make the pinned elements stay pinned without reloading the positioning as scrolling slows on mobile?

I am experiencing the exact same issue. Have you figured anything out? Nothing I've seen on the topic has worked for me (ie turning off all animations in site styles).

Add a List Section with it’s design set to “Simple List”.
In the List Section settings:
Set Max Columns to 1
In the Style area, enable the Card setting
Turn on “Show Image”, “Show Title”, “Show Body”, “Show Button”
Paste in the CSS to your custom CSS area and replace any of the variables as you’d like!
Add this code into custom css:

section[data-section-id="123"] .user-items-list-simple{
  li.list-item {
    @base-top: 25px;
    @num-elements: 5;
    @sticky-start: 100px;
    @sticky-start-mobile: 50px;

    --desktop-height: 400px;
    --mobile-height: 600px;
    --mobile-image-height: 200px;
    --max-width: 800px;
    --border-radius: 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    position: sticky;
    overflow: hidden;
    top: 200px;
    box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.12);
    border-radius: var(--border-radius);
    padding:0px !important;
    height: var(--desktop-height);
    max-width: var(--max-width);
    margin:auto;

    .list-item-content{
      grid-row: 1;
      overflow: auto;
    }
    .list-item-media{
      margin-bottom:0px !important;
    }
    .list-item-media-inner{
      padding: 0px !important;
      height: 100% !important;
    }
    .list-item-content{
      padding: 17px;
      display: flex;
      flex-direction: column;
    }

    @media(max-width: 767px){
      // Uncomment the two settings below to disable this effect on mobile
      // position: relative;
      // top:0 !important;

      grid-template-columns: 1fr;
      height: var(--mobile-height);
      .list-item-content{
        grid-row: 2;
      }
      .list-item-media-inner{
        min-height: var(--mobile-image-height);
      }
    }

    // Generate Offsets
    .generate-offsets(@i) when (@i > 0) {
      &:nth-child(@{i}) {
        top: (@base-top * @i) + @sticky-start;
      }
      @media(max-width:767px){
        &:nth-child(@{i}) {
          top: (@base-top * @i) + @sticky-start-mobile;
        }
      }
      .generate-offsets(@i - 1);
    }
    .generate-offsets(@num-elements);
  }

  &[data-alignment-vertical="bottom"] .list-item-content{
    justify-content: end;
  }
  &[data-alignment-vertical="top"] .list-item-content{
    justify-content: start;
  }
  &[data-alignment-vertical="middle"] .list-item-content{
    justify-content: center;
  }
}