Background jump when opening modal at specific scroll position

[darktell]

A visual glitch occurs when opening a modal window at a specific scroll position near the bottom of the page. The background unexpectedly jumps or shifts, creating a jarring visual effect.

Steps to Reproduce:

• Scroll to a position very close to the bottom of the page (just before reaching the very end)
• Open a modal dialog/window
• Observe the background behavior
  Browser: Safari
  OS: IOS
  Screen resolution: mobile

Additional Notes:
I can’t reproduce it on the demo page — it only happens on my site.

Component:

<Sheet
  isOpen={open ?? false}
  onClose={() => onOpenChange(false)}
  detent={detent ?? "default"}
  style={{ zIndex: 51 }}
  disableScrollLocking={false}
  avoidKeyboard
  dragVelocityThreshold={1000}
>
  <Sheet.Container>
    <Sheet.Header
      className={cn(
        "flex flex-col justify-center text-center pt-4 pb-2 px-4",
      )}
    >
      <div className="bg-muted mx-auto h-2 w-[100px] shrink-0 rounded-full mb-2" />
      <p className={headerClassName}>{title}</p>
    </Sheet.Header>

    <Sheet.Content disableScroll disableDrag={scrollPosition !== "top"}>
      <div className="grid h-full">
        <div
          className={cn(
            "p-4 overflow-auto overscroll-y-none",
            contentClassName,
          )}
          onFocusCapture={handleFocusScroll}
          ref={scrollRef}
        >
          {children}
          {showApplyButton && (
            <Button onClick={() => onOpenChange(false)} className="m-4">
              Apply
            </Button>
          )}
        </div>
      </div>
    </Sheet.Content>
  </Sheet.Container>
  <Sheet.Backdrop
    onTap={() => {
      onOpenChange(false);
    }}
  />
</Sheet>

Usage:

<AdaptiveSheet
  open={createModalOpen}
  onOpenChange={setCreateModalOpen}
  title="test modal"
  trigger={<div className="p-4 bg-amber-300 mx-auto">Open modal</div>}
>
  <div className="space-y-4">
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
    <Input type="text" placeholder="test" />
  </div>
</AdaptiveSheet>

My layout:

[darktell]

Demo:

mpc-be64_7TjU1rh4Jq.mp4