I can’t get anchors to work with Safari. They work perfectly with Firefox.
This issue is that they take you to the top of the page where the anchor is but not to the anchored element.
At first I could type in the #anchor after the index URL and it would work. After testing the third one they stopped working, even the ones that worked only moments before.
For a while I could copy the URL from Firefox, paste it into Safari and it would work, but then that stopped working as well.
Meanwhile, I had made no changes whatsoever to the documents themselves.
Well, this worked for a while. And then it stopped working. If I use the # without the / I am sent to the top of the target page. If I use /# Safari can’t find the page at all.
I have no idea why it would stop working. I wonder if something is getting hosed in the relay.
This did not resolve the issue. My Hype-based site has too much content to include in a single Hype document, I need to be able to jump to a page and then return to the same spot. A standard #anchor works great in Firefox but not in Safari. I thought I had found a fix by using /# and it worked briefly, then because of some change I can’t figure out, it stopped working.
Very late to the game, but I had the same problem, found a solution other than backslash.
I had made an anchor to an image. Which works in many other browsers, but not in Safari.
The anchor was made like so
< a name="shop" id="shop">
However: it is empty, then it (dont know why) it does not work in Safari. I added a random character (a period, ".") and then it was no longer empty and became an anchor-element to safari.
I am guessing it may be a timing-based behavior difference. Hype dynamically creates its HTML, and Safari may be trying to go to the anchor before it exists (without trying again when it is shortly thereafter made).
If @daniel's suggstion doesn't work, you could try adding a Run JavaScript action to the first On Scene Load handler in the Scene Inspector to run code like:
This involves knowing the top value of the target element, and there are pitfalls with this method too, but this allows me to scroll to element locations without having to add anchor links. There's also the… behavior: "smooth" …which is a nicer effect, when it works.
(I'm looking at you Safari, but not directly, because those tabs in version 15 are glaring.)
Hype has a feature to insulate itself from outside styles, so that a page's CSS does not "leak" into content unexpectedly. Beyond your solution of shrinking the text or otherwise hiding the text somehow, there are a few solutions, ranked in order of suggested guidance:
add an inline style, like <a name="shop" style="text-decoration:none">&nsbp;</a>
Uncheck the Protect from External Styles option in the Document Inspector
Use the !important directive on the CSS, like text-decoration: none !important;