image loading breaks anchor linking
- Dominant language
- Python
- Stars
- 58
- Forks
- 160
- Avg merge
- 5d 11h
- Merged PRs (30d)
- 12
Description
If you load a page with a `#section-link` in the url, and the page [has a lot of images on it](https://docs.opendatakit.org/form-question-types), the loading will continue after the browser has already scrolled to the desired location. Loading images causes the page content to change sizes (it gets longer) and so you lose your place immediately. It's a bad experience.
I believe the way to fix this is to specify the height of the images, so that the browser will just allot the appropriate amount of space on load. This messes with display-size-appropriate sizing, though. (And images that aren't device screenshots won't all have the same uniform proportions.) I'm sure there's some CSS media query trick here.
Contributor guide
Research direction
Start with the linked form-question-types page and inspect how its images are styled in the Sphinx documentation site. Reproduce loading that page with a #section-link and many images; done means the browser remains at the requested anchor after image loading completes without breaking responsive sizing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100