Anchor Ids arent accuarate on mobile with react router hash link
Having problems with react router hash link on mobile.
On desktop its working great but on mobile its giving me an offset that it sometimes over 100vh away from my anchor tag.
This is where the links get set
<AnchorLink to={`audio-demos/#${anchorTitle}`} className={`item ${classItem}`} style={{ backgroundImage: `url(${src})` }} > </AnchorLink> This is where the id is set
return ( <> <div className="spacer" id={id}></div> <div className='demo-audio-container' > <h2 >{title}</h2> <div className='adverts-container'> <div className='adverts-left'> The site im developing is https://ingrid-voice.netlify.app/
you can recreate the issue by opening devtools in chrome and going on iphone 5 or 7 for example. go to home page and click a link in the portfolio section. This takes you to audio page and an anchor link. On desktop works but on mobile anchor is not at top of screen.
Any ideas? Thanks
I’ve managed to do a workaround by removing the animated hero image on mobile. Seems to have fixed the problem on my android but still seeing the problem on iphone 7.
