-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
Describe the bug
The alert component creates a positioned container element (.usa-alert__body
) that creates a new offset frame. The in-page navigation component then inserts an anchor inside the alert component. When clicking the link in the in-page navigation, it uses the anchor's offsetTop
, which is the vertical distance between the selected element and its nearest offset parent. In this case, it's nearest offset parent is the alert container, not the page body itself.
Steps to reproduce the bug
- Browse to https://handbook.tts.gsa.gov/tools/git-signing
- Click
About the cryptographic algorithm
in the in-page nav - Note that the page scrolls to the top rather than to the linked heading
Expected Behavior
The browser should scroll to the selected heading, perhaps using getBoundingClientRect
instead of offsetTop
since the former computes absolute values (relative to the page, not any other elements in the tree).
Related code
https://github.com/uswds/uswds/blob/main/packages/usa-in-page-navigation/src/index.js#L202
Screenshots
No response
System setup
- USWDS version: 3.11.0
- All browsers
Additional context
Possibly related to:
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.
Metadata
Metadata
Assignees
Type
Projects
Status