When you call .focus() on an element (#focusable), the browser tries to ensure that the focused element is visible in the viewport. This may trigger:

1.A scroll adjustment, or

2.A layout reflow if the focus causes any changes in geometry or styling.

You can fix or avoid this behavior by:

1.Avoiding negative margins in tight layouts, especially when working with focusable elements.

2.Disabling scroll anchoring if needed :

html {
  overflow-anchor: none;
}

3.Ensuring sufficient space between the elements:

<div id="spacer" style="height: 5px;"></div>