When I click on a link with an anchor on desktop, it scrolls there. However on mobile (Android, FF & Chrome) the anchor gets stripped from the url so there is no scrolling to that spot.
What I am trying to do:
We have a long guideline and faq document that need to link to headings. Because Discourse strips out id parameters, I have created a simple theme component that uses custom data attributes in the target document and listens for anchors in the url to scroll to the element with matching data element.
It works on desktop!
However on mobile, the anchors seem to get stripped so that when you get to the target page there is no scrolling to the right element. And of course with a long document Mobile is where you need that navigation the most.
Now, I do find that the anchors generated by the Table of Contents component do work when opening them in a new link. They are not stripped from the url and the browser scrolls to the right place.
i don’t use android so i can’t test this but i’ve used linking to headers many times and they work on my iphone just fine. i’m curious why you are using id anchors instead of just linking to the header you want?
See that -13 at the end? It’s there because it’s the thirteenth heading. As soon as you add a new heading earlier in the document it breaks. And of course if you change the text of the heading it breaks.
When I say breaks, I mean changes in the target document. From what I can tell those anchors are generated dynamically when the page is loaded. So if you are using the TOC plugin changing the document is not a problem.
In our use case, this is a FAQ being linked to. So it is not uncommon to add new questions/headings.
But you are correct that Discourse seems to detect the pattern of those anchors and allows them through. But if it doesn’t match the expected pattern then it gets stripped.
They are just ordinary alphanumeric ids. So if I were trying to create an anchor for your example above I would just use cloudflare-r2.