Description of the issue
In browser's that partially or don't support scroll-behavior: smooth;, clicking a link on the mobile nav sends you to the wrong position in the DOM. This is caused by a race condition of the nav "closing" at the same time the browser is trying to choose where to scroll.
Impacted component(s)
Pfe-jump-links, perhaps pfe-accordion if we need to expose a new css property for devs.
Steps to reproduce
- Go to any browser that doesn't support smooth scroll (I'm lookin' at you Safari)
- Make sure your browser window is below 992px width
- Open the mobile nav and click a link
- Notice the final position of the scroll, and that the dropdown nav is closed
- the browser scrolls to the correct position minus the height of the dropdown nav when expanded
Expected behavior
It should not take into account the height of the nav when expanded, and instead should resolve to the correct position as browsers who do respect smooth scrolling.
Screenshots
Related issues