Ionic 6 & Vue 3 | Ion-Modal scrollIntoView() Hides Fixed Header Issue

Ionic Framework Ionic Vue
1

I created scrollTo functionality by clicking on an icon in a sidebar. The scrolling works but the ion-header is moved out of view when scrolling to the desired location.

Here is a video of the behavior I am describing: Screen Recording 2022-07-13 at 2.31.53 PM.mov - Google Drive

Almost identical template works with Ionic 4 & Angular

Any ideas on what is wrong here?

Vue Template

<template>
  <ion-modal>
    <ion-header>
      <ion-toolbar>
        // Close modal button
      </ion-toolbar>
      <ion-searchbar />
      <div>
        // Vertical column of scroll to anchor tags
        <a @click="scrollTo('Math')">
          <ion-icon :icon="calculator"/>
        </a>
      </div>
    </ion-header>
    
    <ion-content>
      <ion-list>
        <ion-list-header id="Math">
          <ion-label>
            Math
          </ion-label>
        </ion-list-header>
      </ion-list>
    </ion-content>
  </ion-modal>
</template>

scrollTo Function

function scrollTo (category: string) {
  let elementId = category.replace(' ', '')
  let subject = document.getElementById(elementId)
  if (subject) {
    subject.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}