Anchor in collapsible block skips title line of collapsible block

[skwde]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

When defining an anchor in the title line of a collapsible block the title of the collapsible block is skipped when the anchor is used.

Expected behaviour

The title line should be shown as well.

Actual behaviour

The title line is skipped, i.e. the anchor links to the first line after the tilte

Steps to reproduce

1. use mkdocs.yml below
2. use below docs/index.md
3. run mkdocs serve -a localhost:8000 --strict
4. connect to localhost:8000/#abc

Use following docs/index.md:

# Welcome to MkDocs

??? info "test anchor<a id='abc'></a>"

    !!! note "something"

        Some other text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Sed viverra ipsum nunc aliquet bibendum. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Aliquet porttitor lacus luctus accumsan tortor posuere. Felis imperdiet proin fermentum leo vel orci porta. Ultricies lacus sed turpis tincidunt. Erat nam at lectus urna. Nunc scelerisque viverra mauris in. Et malesuada fames ac turpis egestas integer eget. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Dignissim suspendisse in est ante in nibh. Integer quis auctor elit sed vulputate mi. Sed risus ultricies tristique nulla. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Pellentesque sit amet porttitor eget dolor morbi. Nam aliquam sem et tortor consequat id porta nibh.

    Commodo elit at imperdiet dui accumsan sit amet. Bibendum enim facilisis gravida neque convallis a cras semper. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Duis tristique sollicitudin nibh sit. Est placerat in egestas erat imperdiet sed euismod nisi porta. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Neque volutpat ac tincidunt vitae semper quis. Volutpat ac tincidunt vitae semper quis. Aliquam id diam maecenas ultricies mi. Nibh cras pulvinar mattis nunc sed blandit libero volutpat sed. Feugiat in ante metus dictum at tempor. Eget aliquet nibh praesent tristique magna sit. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.

    Egestas integer eget aliquet nibh praesent tristique magna sit. Leo in vitae turpis massa sed. Turpis egestas pretium aenean pharetra. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Feugiat nisl pretium fusce id velit ut tortor pretium. Accumsan sit amet nulla facilisi morbi tempus. Eget lorem dolor sed viverra ipsum. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Proin libero nunc consequat interdum varius sit. Vestibulum lectus mauris ultrices eros in cursus. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Vitae suscipit tellus mauris a diam. Augue neque gravida in fermentum et sollicitudin. Tortor at risus viverra adipiscing at in tellus integer. Diam maecenas sed enim ut sem. Velit dignissim sodales ut eu sem integer. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Laoreet non curabitur gravida arcu ac tortor. Mi bibendum neque egestas congue quisque egestas.

    In ante metus dictum at tempor commodo ullamcorper a. Vel eros donec ac odio tempor orci dapibus ultrices. Ac auctor augue mauris augue neque. A arcu cursus vitae congue. Euismod elementum nisi quis eleifend quam adipiscing. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Ultricies mi eget mauris pharetra et ultrices neque ornare. Varius quam quisque id diam. Morbi tincidunt ornare massa eget. Lacus vel facilisis volutpat est velit egestas dui. Id volutpat lacus laoreet non curabitur gravida arcu ac. Curabitur vitae nunc sed velit dignissim sodales ut. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Velit laoreet id donec ultrices tincidunt arcu.

    Et netus et malesuada fames ac turpis. Sodales neque sodales ut etiam sit amet. Vitae nunc sed velit dignissim sodales ut. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Viverra mauris in aliquam sem fringilla ut morbi. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Lacus viverra vitae congue eu consequat ac felis donec et. Duis at tellus at urna condimentum mattis pellentesque id. Vitae et leo duis ut diam quam nulla porttitor. Massa tempor nec feugiat nisl pretium fusce id velit ut. Viverra orci sagittis eu volutpat odio facilisis. Morbi tristique senectus et netus et malesuada fames ac. Sed nisi lacus sed viverra tellus in hac. Consectetur purus ut faucibus pulvinar elementum integer. Sit amet porttitor eget dolor morbi non arcu risus quis.

    Non enim praesent elementum facilisis leo vel fringilla est ullamcorper. Aliquam ultrices sagittis orci a. Sed vulputate odio ut enim blandit volutpat maecenas. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Sagittis aliquam malesuada bibendum arcu vitae. Netus et malesuada fames ac turpis egestas sed tempus urna. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Quisque sagittis purus sit amet. Morbi enim nunc faucibus a pellentesque sit amet. Dictum at tempor commodo ullamcorper.

    Adipiscing bibendum est ultricies integer quis auctor elit sed. Commodo viverra maecenas accumsan lacus. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu. Tincidunt eget nullam non nisi est sit. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Risus nullam eget felis eget nunc lobortis. Dignissim enim sit amet venenatis urna cursus eget. Aenean euismod elementum nisi quis eleifend. Tincidunt augue interdum velit euismod. Est ullamcorper eget nulla facilisi etiam dignissim. Ac tortor vitae purus faucibus ornare suspendisse. Enim nec dui nunc mattis enim. Ac turpis egestas maecenas pharetra convallis posuere morbi leo.

    Duis convallis convallis tellus id. Turpis nunc eget lorem dolor sed viverra ipsum nunc. A pellentesque sit amet porttitor eget. Tristique nulla aliquet enim tortor at auctor urna nunc id. Sagittis orci a scelerisque purus. Eget gravida cum sociis natoque penatibus et. Augue ut lectus arcu bibendum at varius vel pharetra vel. Integer eget aliquet nibh praesent tristique magna. Ullamcorper malesuada proin libero nunc. Egestas integer eget aliquet nibh praesent tristique magna sit. Turpis in eu mi bibendum neque egestas. Id aliquet risus feugiat in ante.

    Fermentum leo vel orci porta non pulvinar neque. Scelerisque purus semper eget duis at tellus at urna condimentum. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Justo nec ultrices dui sapien eget. Sed tempus urna et pharetra pharetra massa massa ultricies. Turpis egestas maecenas pharetra convallis posuere morbi leo. Ornare arcu dui vivamus arcu felis bibendum ut. Eget duis at tellus at urna condimentum mattis. Augue lacus viverra vitae congue eu consequat. Tortor posuere ac ut consequat semper viverra nam libero justo.

    Fermentum iaculis eu non diam phasellus vestibulum lorem. Libero volutpat sed cras ornare arcu. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Pellentesque nec nam aliquam sem et. A lacus vestibulum sed arcu. Viverra vitae congue eu consequat ac felis. In mollis nunc sed id semper risus in. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Aenean euismod elementum nisi quis eleifend quam. Molestie a iaculis at erat pellentesque adipiscing. Consequat interdum varius sit amet mattis. Tempus iaculis urna id volutpat lacus laoreet non. Blandit aliquam etiam erat velit scelerisque.

    Habitasse platea dictumst quisque sagittis purus sit. Sed arcu non odio euismod. Commodo elit at imperdiet dui accumsan sit amet nulla. Purus in mollis nunc sed. Sed viverra tellus in hac habitasse platea. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Nisi porta lorem mollis aliquam. Urna neque viverra justo nec ultrices. Ornare lectus sit amet est placerat. Mauris augue neque gravida in fermentum et sollicitudin ac. Eget egestas purus viverra accumsan in nisl. Quam viverra orci sagittis eu. Enim neque volutpat ac tincidunt vitae semper. Ut tellus elementum sagittis vitae. Morbi tristique senectus et netus et malesuada fames ac turpis. Elementum curabitur vitae nunc sed velit dignissim sodales.

    Amet justo donec enim diam vulputate ut. Dui vivamus arcu felis bibendum ut tristique et. Duis tristique sollicitudin nibh sit amet. Nulla at volutpat diam ut venenatis tellus in. Consequat nisl vel pretium lectus quam id leo in. Donec pretium vulputate sapien nec sagittis. Magna sit amet purus gravida quis blandit turpis. Auctor eu augue ut lectus arcu bibendum at varius vel. Magna ac placerat vestibulum lectus mauris ultrices. Elementum nisi quis eleifend quam. Volutpat blandit aliquam etiam erat velit scelerisque. Habitasse platea dictumst quisque sagittis purus sit amet. Pretium lectus quam id leo in. Molestie nunc non blandit massa. Eget gravida cum sociis natoque penatibus. Cursus risus at ultrices mi tempus imperdiet nulla malesuada.

    Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus. Vestibulum lectus mauris ultrices eros in cursus. Tellus mauris a diam maecenas sed enim. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim neque volutpat ac tincidunt vitae semper quis lectus. Purus viverra accumsan in nisl nisi. Sed tempus urna et pharetra. Sed odio morbi quis commodo odio aenean sed. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. In nibh mauris cursus mattis molestie a iaculis at erat. Lacus vestibulum sed arcu non odio euismod lacinia.

    Nullam non nisi est sit amet. Orci eu lobortis elementum nibh. Facilisis sed odio morbi quis commodo odio aenean. Neque viverra justo nec ultrices dui sapien eget mi. A pellentesque sit amet porttitor. Ac tincidunt vitae semper quis lectus nulla. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Egestas quis ipsum suspendisse ultrices gravida. A diam sollicitudin tempor id. Nascetur ridiculus mus mauris vitae ultricies leo. Ut sem nulla pharetra diam. Ut etiam sit amet nisl. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Donec enim diam vulputate ut pharetra sit amet aliquam id. Ac tortor vitae purus faucibus ornare. Augue eget arcu dictum varius duis at consectetur. Lorem ipsum dolor sit amet. Risus nullam eget felis eget nunc.

    Platea dictumst quisque sagittis purus. Platea dictumst vestibulum rhoncus est pellentesque elit. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. At ultrices mi tempus imperdiet. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Tincidunt vitae semper quis lectus nulla at. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Urna neque viverra justo nec ultrices dui sapien eget. Sit amet tellus cras adipiscing enim eu. Adipiscing enim eu turpis egestas pretium aenean. Lorem ipsum dolor sit amet. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Netus et malesuada fames ac turpis. Nunc scelerisque viverra mauris in aliquam sem fringilla ut.

    Vitae aliquet nec ullamcorper sit amet. Interdum varius sit amet mattis vulputate. Id volutpat lacus laoreet non curabitur. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Semper auctor neque vitae tempus quam pellentesque nec nam. Suspendisse in est ante in nibh mauris cursus mattis. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Odio facilisis mauris sit amet massa vitae. Tempus egestas sed sed risus pretium quam vulputate dignissim. Lacus sed viverra tellus in hac habitasse platea dictumst. Vel turpis nunc eget lorem. A pellentesque sit amet porttitor eget dolor morbi non. Arcu cursus euismod quis viverra nibh. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Malesuada fames ac turpis egestas sed tempus urna. Justo eget magna fermentum iaculis eu. Vehicula ipsum a arcu cursus vitae congue. Convallis posuere morbi leo urna molestie at elementum. Augue eget arcu dictum varius duis at.

    Sed blandit libero volutpat sed cras ornare arcu. Sed risus pretium quam vulputate dignissim. Vestibulum rhoncus est pellentesque elit. Et odio pellentesque diam volutpat commodo. At imperdiet dui accumsan sit. Arcu non odio euismod lacinia at. Fermentum dui faucibus in ornare quam. A arcu cursus vitae congue. Pharetra magna ac placerat vestibulum lectus. Vitae justo eget magna fermentum. Scelerisque felis imperdiet proin fermentum leo vel orci porta.

    Tempus egestas sed sed risus pretium quam vulputate dignissim. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Sagittis id consectetur purus ut faucibus pulvinar elementum. Vulputate sapien nec sagittis aliquam. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Pulvinar sapien et ligula ullamcorper. Tortor id aliquet lectus proin nibh nisl condimentum. Sollicitudin tempor id eu nisl nunc mi ipsum. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Mattis aliquam faucibus purus in massa tempor. Nisl purus in mollis nunc sed id semper risus in. Luctus accumsan tortor posuere ac ut. Volutpat commodo sed egestas egestas fringilla phasellus. Eu lobortis elementum nibh tellus molestie. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Feugiat nisl pretium fusce id velit ut tortor pretium. Elementum eu facilisis sed odio morbi quis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Neque convallis a cras semper auctor neque vitae.

    Eget magna fermentum iaculis eu non. Diam sollicitudin tempor id eu nisl. Adipiscing commodo elit at imperdiet dui accumsan sit. Dolor sit amet consectetur adipiscing elit pellentesque. Diam donec adipiscing tristique risus nec. Quis hendrerit dolor magna eget est lorem ipsum. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Ultricies lacus sed turpis tincidunt id aliquet risus. Amet nisl suscipit adipiscing bibendum. At risus viverra adipiscing at in tellus integer. Eget aliquet nibh praesent tristique magna sit amet purus. Egestas erat imperdiet sed euismod nisi. Nec tincidunt praesent semper feugiat. Nulla facilisi nullam vehicula ipsum. Nec nam aliquam sem et.

    Facilisis leo vel fringilla est ullamcorper eget. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Ornare arcu odio ut sem. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Adipiscing tristique risus nec feugiat in fermentum posuere. Consequat id porta nibh venenatis cras sed felis eget velit. Nisi scelerisque eu ultrices vitae. Risus in hendrerit gravida rutrum quisque non. Vel facilisis volutpat est velit egestas dui id ornare. Tincidunt id aliquet risus feugiat in. Diam quis enim lobortis scelerisque fermentum dui faucibus in.

    Text generated by <https://loremipsum.io/generator>

Package versions

• Python: python --version: Python 3.10.4
• MkDocs: mkdocs --version: mkdocs, version 1.3.0
• Material: pip show mkdocs-material | grep -E ^Version: Version: 8.2.15

Configuration

---
site_name: My Docs

theme:
  name: material

markdown_extensions:
  - admonition
  - pymdownx.details
  - pymdownx.superfences

nav:
  - Introduction: index.md

System information

• Operating system: MacOS 11.6.6
• Browser: Firefox, Chromium, Safari

[squidfunk]

Thanks for reporting. I can reproduce the behavior you're describing. However, it only manifests when the details is initially rendered closed, and then subsequently opened. What's in effect here is the business logic that opens the details when an anchor inside it is targetted. I'm not sure whether there's a good fix but I'll investigate.

[squidfunk]

So, it seems that this problem is triggered by this line:

mkdocs-material/src/assets/javascripts/components/content/details/index.ts

Line 127 in 978eab0

el.scrollIntoView()

If we remove this line, the offset is correct and the issue vanishes. However, now, Firefox and Safari will not scroll the element into view after the navigation changed. Thus, we would have to find a way to normalize behavior among browsers, which I couldn't find in 30min of investigation. If you can find a way, a PR is appreciated.

I'm currently considering this as not fixable with reasonable effort, and a minor bug, since only anchors inside closed details summaries are affected. At some point in the future, I will refactor targeting and anchor handling, likely when tackling #4125.