Defect #43143
closed
Edit heading is hidden behind sticky header after clicking the "Edit" link on issue page
0%
Description
On the issue page, when clicking the Edit link, the page scrolls to the edit section. However, the sticky header covers the Edit heading, making it unclear that the user has reached the section.
Related: Feature #42684: Add a sticky header to keep the issue subject visible on scroll
The scroll should be adjusted so the heading is fully visible.
| Current | Expected |
|---|---|
 |
 |
- Open an issue
- Click the Edit link
- The Edit heading is hidden behind the sticky header
Files
Related issues
Updated by Mizuki ISHIKAWA 26 days ago
- File 0001-Adjust-scrolling-to-keep-Edit-heading-visible.patch 0001-Adjust-scrolling-to-keep-Edit-heading-visible.patch added
- File 0002-Add-system-test-for-Edit-heading-visibility.patch 0002-Add-system-test-for-Edit-heading-visibility.patch added
- Added scroll-margin-top for #update.
- Replaced jQuery animate() with native scrollIntoView(), which takes scroll-margin-top into account.
- Use the native focus() function with preventScroll: true to prevent automatic scrolling when setting focus
- Added system test to confirm the heading is visible.
- The test uses JavaScript to check that the Edit heading is not hidden. Since this check may be fragile, please decide whether to include it in the commit.
Updated by Mizuki ISHIKAWA 26 days ago
Regarding the patch for #note-1, scrollIntoView does not allow specifying the scroll speed and depends on the browser, so scrolling becomes slightly slower than before (100ms).
Updated by Mizuki ISHIKAWA 23 days ago
- File 0003-Change-scrollIntoView-behavior-from-smooth-to-instan.patch 0003-Change-scrollIntoView-behavior-from-smooth-to-instan.patch added
Mizuki ISHIKAWA wrote in #note-2:
Regarding the patch for #note-1, scrollIntoView does not allow specifying the scroll speed and depends on the browser, so scrolling becomes slightly slower than before (100ms).
I've attached a patch that changes the scrollIntoView option from behavior: 'smooth' to behavior: 'instant' so that the behavior is closer to the previous one.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#behavior
Updated by Katsuya HIDAKA 5 days ago
I tested it on the latest versions of Chrome, Firefox, Safari, and MS Edge, and confirmed that the issue is resolved. Looks good!
Updated by Go MAEDA 2 days ago
- Related to Feature #42684: Add a sticky header to keep the issue subject visible on scroll added