Deeplinking with hashlinks and IDs

how is it possible to deeplink to a certain position marked with an ID on a page with long content with a hashlink?
For example on tab2 I have a long text and some positions are marked with IDs

<p id="foo"></p>

Now I want to link from another Tab to this one on exactly this position in the text

<Link to"/route#foo"><IonButton>Link to #foo</IonButton></Link>

With normal from react-router-dom it`s not possible, so I tried “react-router-hashlink” and it
worked in the browser and on android, but NOT on iOS.

<HashLink to"/route#foo"><IonButton>Link to #foo</IonButton></HashLink>

So I found out, it is the same problem on MacOS Safari (Firefox and Chrome are working) and on every mobile browser on iOS.
And: when I am testing it on a testapp, sometimes its working and sometimes not. On Safari mobile maybe every 10th try its working.

What I`m doing wrong here?
Thanks for answering.