Pinned image not working correctly on ipad

Site URL: https://seadragon-marlin-z77k.squarespace.com/

I have pinned images with text that scrolls up on several places on my site (twice on homepage and once on About. I have it set not it display on mobile ( in some instances creating separate mobile sections). I am happy with it on my laptop and phone but on ipad it shows the color block under the image as it scrolls. Hard to capture in a photo as it's moving but I attached a screen shot from my ipad. I did some Googling and it seems like this is a regular issue with pinned images but I also couldn't quite find the solution. 

Code: 1234

I'd appreciate it if anyone has time to take a peek! Thanks! 

I see your layout different your screenshot, you mean this?

@tuanphan - Thanks for responding! I have two sticky images on the site. One is on the homepage where your image shows  https://seadragon-marlin-z77k.squarespace.com/ and one is on  https://seadragon-marlin-z77k.squarespace.com/about where my image shows. I am having the same problem with both on ipad view. 
Password: 1234

With Homepage, try this to Website Tools > Custom CSS box

@media screen and (max-width:991px) and (min-width:768px) {
.fe-block-yui_3_17_2_1_1731805077359_99812 {
    height: 100vh !important;
}
}

@tuanphan - I appreciate the attempt but this unfortunately did not fix it. I had tried something similar when I first set up the pinned image. I just tried your code as well hoping that mine was just a little off.  I don't think I will have a ton of iPad views for this site but it's still driving me crazy that I can't figure it out. 

Directions:

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;
  }
}