when i click or focus on an element in the footer, we SHOULD scroll down which makes the target element rise on the page into the “safe” area. However, it scrolled up incorrectly pushing the element back further down the page. please identify why the element scrolled the wrong direction. here is my console logs:
[***** FocusScroll 2025-01-10T07:43:00.835Z] Focus Event: {element: ‘INPUT’, id: ”, type: ‘focus’, direction: ‘forward’}
main.js:230146 [***** FocusScroll 2025-01-10T07:43:00.837Z] Position Calculated: {element: ‘INPUT’, position: {…}, rect: DOMRect, containerRect: DOMRect}
main.js:230146 [***** FocusScroll 2025-01-10T07:43:00.837Z] Position Validation: {position: {…}, isValid: true, containerHeight: 1595}
main.js:230146 [***** FocusScroll 2025-01-10T07:43:00.837Z] Safe Area Check: {elementRelativeTop: 245, elementRelativeBottom: 273, elementViewportTop: 245, elementViewportBottom: 273, bodyTop: 183, …}
main.js:230146 [***** FocusScroll 2025-01-10T07:43:00.838Z] Focus Ignored: {reason: ‘Element does not need scrolling’, element: ‘INPUT’}

let’s really analyze the logic and abstract the processes as methods to make the code more readable.