scroll-behavior: smooth; does not work for the first time in 428px resolution below

Question

Hope everyone starts amazing new year.

I am using parcle.js. My hamburger menu smooth scroll does not work on first attempt. what I mean is when I click on appointments item menu for example, it does not go on the appointment section header, it stops away before appointment header, but when I click on it again, it corrects itself and work perfectly after that.

I just post my interestionObserver file because I am not sure if it makes conflict with smooth scrolling

please if there is more info needed, let me know so I can provide

menu.html

<nav
  id="mainNav"
  aria-label=""
  class="fixed top-0 left-0 w-full z-50
       bg-pageBg dark:bg-pageBgDark text-action
         dark:text-primaryOnDark h-10 mb-2"
>
  <ul
    id="topbar-menu"
    class="list-none content-center items-center
  justify-items-center h-10 hidden md:flex"
    role="group"
    aria-label=""
  >
    <li
      class="flex flex-grow-0 content-center justify-left"
      role="presentation"
    >
      <a
        href="#welcome"
        role="menuitem"
      >
        <div
          role="img"
          aria-label=""
          class="font-bold ml-1"
        >
          <span
            class="text-lg"
            style="font-family:'Times New Roman', Times, serif"
          ></span>
          <span style="font-family: Arial, Helvetica, sans-serif;"></span>
        </div>
    </li>


    <li
      class="flex flex-1 content-center justify-center"
      role="presentation"
    >
      <a
        href="#services"
        role="menuitem"
      >Services</a>
    </li>
    <li
      class="flex flex-1 content-center justify-center active"
      role="presentation"
    >
      <a
        href="#appointments"
        role="menuitem"
      >Appointments</a>
    </li>

    <li
      class="flex flex-1 content-center justify-center"
      role="presentation"
    >
      <a
        href="#physicians"
        role="menuitem"
      >Physicians</a>
    </li>

    <li
      class="flex flex-1 content-center justify-center"
      role="presentation"
    >
      <a
        href="#contact"
        role="menuitem"
      >Contact Us</a>
    </li>

    <li
      role="presentation"
      class="flex flex-grow-0 place-content-end self-center font-bold text-2xl dark:hidden theme-toggle"
    >

      <span
        role="button"
        tabindex="0"
        aria-label="activate light mode"
      >

        <span
          class="iconify"
          data-icon="mi:sun"
        ></span>
      </span>
    </li>
    <li
      role="presentation"
      class="hidden flex-grow-0 place-content-end self-center font-bold text-2xl dark:flex theme-toggle"
    >
      <span
        role="button"
        tabindex="0"
        aria-label="activate dark mode"
      >
        <span
          class="iconify"
          data-icon="mi:moon"
        ></span>
      </span>

    </li>
  </ul>
  <ul
    class="list-none content-center h-10
   flex md:hidden flex-1 justify-between"
    role="group"
    aria-label=""
  >
    <li
      class="justify-self-start"
      role="presentation"
    >
      <a
        href="#welcome"
        role="menuitem"
        class="font-bold ml-1 mt-1"
      >
        <span
          class="text-lg"
          style="font-family:'Times New Roman', Times, serif"
        ></span>
        <span style="font-family: Arial, Helvetica, sans-serif;"></span>

      </a>
    </li>
    <li
      role="presentation"
      class="h-10 w-12 p-0 m-0 justify-self-end"
    >
      <a
        id="flyout-menu-btn"
        class=" w-10 h-10 p-1 "
        aria-label="Flyout Menu Button"
        aria-haspopup="menu"
        aria-controls="flyout-menu"
        aria-expanded="false"
        role="button"
        tabindex="0"
      >
        <div class="hamburger-menu-layer"></div>
        <div class="hamburger-menu-layer"></div>
        <div class="hamburger-menu-layer"></div>
      </a>
    </li>
  </ul>
  <include src="src/components/flyout-menu.html"></include>
</nav>
<div
  id="menu-curve"
  role="presentation"
  class="w-full border-t-pageBg dark:border-t-pageBgDark
   h-10 rounded-t-3xl fixed t-10"
>
</div>

base.css

@tailwind base;

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-margin, 40px);
    font-family: 'Raleway', sans-serif;
    :target::before {
      content:"";
      display:block;
      /* height:40px; */
       /* fixed header height */
      margin:40px 0 0; /* negative fixed header height */
      }
  }

  * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
  }
  @counter-style blue-arrow {
    system: cyclic;
    symbols: ➡️;
    suffix: " ";
  }
  section {
    @apply border-b border-b-tertiary px-1 pb-5 pt-2;
    .section-header {
      @apply text-center block text-2xl font-bold text-action;
    }
  }

}

menu.css

@tailwind components;
@tailwind utilities;

@layer components {
  nav li a {
    @apply relative inline-block;
  }
  nav li.active a {
    @apply relative
    inline-block
    font-bold;
  }
  nav li a::after {
    @apply absolute
      bottom-0
      left-0
      h-0.5
      w-full
      origin-center
      scale-0
      transform
      bg-highlightBold
      opacity-100
      transition-[opacity_250,transform_250];
    content: "";
    transform: scale(0);
  }
  nav li.active a::after {
    opacity: 1;
    transform: scale(1);
  }

  #flyout-menu {
    box-shadow:
      0px 3px 20px rgba(0, 0, 0, 0.2),
      0px 3px 30px rgba(0, 0, 0, 0.12);
    display: none;
  }
  .menu-is-open #flyout-menu {
    animation: openMenu 0.5s alternate forwards;
    display: block;
  }

  .menu-is-close #flyout-menu {
    animation: closeMenu 0.5s alternate forwards;
    display: block;
  }

  .hamburger-menu-layer {
    transition: all 0.3s ease-in-out;
    @apply mb-1 h-2 bg-action;
  }
  .menu-is-open #flyout-menu-btn .hamburger-menu-layer:nth-child(1) {
    -webkit-transform: translateY(13px) rotate(45deg);
    -ms-transform: translateY(13px) rotate(45deg);
    -o-transform: translateY(13px) rotate(45deg);
    transform: translateY(13px) rotate(45deg);
  }
  .menu-is-open #flyout-menu-btn .hamburger-menu-layer:nth-child(2) {
    opacity: 0;
  }
  .menu-is-open #flyout-menu-btn .hamburger-menu-layer:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
}

@layer utilities {
  @keyframes openMenu {
    0% {
      clip-path: inset(0 0 99% 100%);
    }
    100% {
      clip-path: inset(0 -15% 0 -61%);
    }
  }

  @keyframes closeMenu {
    0% {
      clip-path: inset(0 -15% 0 -61%);
    }
    100% {
      clip-path: inset(0 0 99% 100%);
    }
  }
}

just in case, I post intersectionObserver file as well

(() => {
  function getElementFullHeight(menuElement) {
    const computedStyles = window.getComputedStyle(menuElement);
    return menuElement.offsetHeight +
      parseFloat(computedStyles['marginTop']) +
      parseFloat(computedStyles['marginBottom']);
  }

  const menuItems = document.querySelectorAll("#topbar-menu a[href^='#'], #flyout-menu a");
  const menuHeight = getElementFullHeight(document.getElementById('mainNav'))
  document.documentElement.style.setProperty('--scroll-margin', `${menuHeight - 1}px`);

  menuItems.forEach(linkElement => {
    const targetElement = document.getElementById(linkElement.getAttribute('href').split('#')[1]);
    const threshold = window.innerHeight / targetElement.clientHeight;
    console.log(targetElement, targetElement.clientHeight, window.innerHeight)
    console.dir(targetElement)
    if (!targetElement) return;
    const observer = new IntersectionObserver((entries) => {
      setActiveMenuItem(linkElement, entries);
    }, { threshold: 0.19 });

    observer.observe(targetElement);
  })

  const setActiveMenuItem = (linkElement, entries) => {
    console.log('scrolling...', linkElement)
    entries.forEach(entry => {
      const parent = linkElement.parentNode;
      if (entry.isIntersecting)
        parent.classList.add('active');
      else
        parent.classList.remove('active');
    });
  }
})();

my body in index.html

 <body class="bg-pageBg dark:bg-pageBgDark
   text-pageBgDark dark:text-pageBg">
    <include src="src/header.html"></include>
    <main class="w-100 ml-3">
      <a id="back-to-top-page"></a>
      <include src="./src/sections/hero.html"></include>
      <include src="./src/sections/welcome.html"></include>    
      <include src="./src/sections/services.html"></include>    
      <include src="./src/sections/appointments.html"></include>
      <include src="./src/sections/physicians.html"></include>
      <include src="./src/sections/contact.html"></include>
      <script
        async="async "
        src="./js/scrollToRightPlace.js"
      ></script>
      <script
        async="async "
        src="./js/menuHighlight.js"
      ></script>
      <script
        async="async "
        src="./js/darkMode.js"
      ></script>
      <script
        async="async"
        src="./js/toggleMenu.js"
      ></script>
      <script
        async="async "
        src="./js/backtoupbtn.js"
      ></script>
    </main>

  </body>