Scrolling with equation refs does not always work with SVG output

[pdmosses]

Issue Summary

Clicking on links produced by \eqref sometimes doesn't scroll to the target location when using SVG output with MathJax v3.1.2 in Safari. Clicking on the same links scrolls correctly in Firefox.

Issue #297 reported a similar problem with \eqref and SVG in v2.1.

Strangely, the Safari behaviour appears to depend on the form of the label: x:z scrolls correctly, whereas xyz doesn't!

Steps to Reproduce:

1. Visit https://pdmosses.github.io/eqref.html in Safari
2. Scroll down to the bottom of the page (so the top of the page is hidden) and click on the link to (2). The window does not scroll up to show the target equation.
3. Scroll down to the bottom of the page, and click on the link to (1). The window does scroll up to show the target equation.
4. In Firefox, both steps 2 and 3 scroll up to the target equation.

Clicking on a valid link to an equation should always scroll to reveal the targeted equation text.

(In fact the link to (1) scrolls up only to the baseline of the equation, so the equation text isn't actually visible; but that is a relatively minor, separate issue.)

Technical details:

• MathJax Version: 3.1.2
• Client OS: Mac OS X 10.15.7
• Browser: Safari 14.0.2 (the problem doesn't seem to arise in Firefox 83.0)

Supporting information:

• Please supply a link to a (live) minimal example page, when possible.

  https://pdmosses.github.io/eqref.html

• Check your browser console window for any error messages, and include them here.

  None.

• Include the MathJax configuration you are using, and the script tag that loads MathJax itself.

mathjax:
  source: 
     "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"
  config:
    "{ 
      tex: { 
        tags: 'ams',
        packages: {'[+]': ['textmacros']}
      },
      loader: {
        load: ['[tex]/textmacros']
      },
      svg: { 
        mtextInheritFont: true, 
        displayAlign: 'left', 
        displayIndent: '2em',
        fontCache: 'global'
      }
    }"

[dpvc]

Thanks for reporting the issue. The ID works if I add it to the URL by hand, and the link form the reference is picked up buy the browser as an actual link, but it doesn't seem to follow the link. Very peculiar. It appears to be a WebKit bug.

It is interesting that the links seem to work when there is a special character in the label that must be escaped as part of a URL. We can use that to get all the labels to work by using the tagformat extension to force the ids to always include a special character. For example:

MathJax = {
  loader: {
    load: ['[tex]/tagformat']
  },
  tex: {
    tags: 'ams',
    packages: {'[+]': ['tagformat']},
    tagformat: {
      id: (id) => 'mjx-eqn:' + id.replace(/\s/g, '_')
    }
  }
};

would do it. This seems to work for me. You will need to merge this into your configuration for now.

[pdmosses]

Thanks for the quick response. The suggested use of tagformat works in Safari for the equation labels on my test page when testing locally; I haven't yet checked whether it also works with other labels.

However, when using \cssId{mjx-eqn-x%3Ax}{x=y} to create a target with a very similar URL to that created by \label{x:z}, the link \href{#mjx-eqn-x%3Ax}{link} works in Firefox, but not in Safari. I've now added that example to the test page (without adding tagformat to the configuration) together with some explanatory text.

Getting \cssId and \href to work in Safari was actually my original problem: I noticed that links to equation labels don't always work while trying to diagnose why direct links don't...

It seems odd that an \href to a URL produced by \label works in Safari, but an \href to a very similar URL produced by \cssId doesn't, despite working in Firefox.

BTW, when putting links to my test page manually in the browser, Firefox seems to scroll accurately (to the target baseline) whereas Safari scrolls to the top of the page. Might that be related to the suspected WebKit bug?

[dpvc]

Try using \cssId{mjx-eqn-x:x}{x=y} but \href{#mjx-eqn-x%3Ax}{link}. The css id does not need to be URL encoded (it is just the ID not a URL to the ID), whereas the href is an actual URL, so special characters need to be URLencoded. This worked for me. The ID does seem to need to contain a special character (one that needs to be encoded in the href) in order to work in WebKit.

[pdmosses]

Ah, of course, thanks! And the \href link to the corrected \ccsId line scrolls correctly in Safari too. I've corrected the test page.

[dpvc]

Glad we could figure out something that works. There still seems to be a WebKit bug, but we do seem to have a way to work around it for now.

I'm going to leave this open so that I can change the default tag format to include a colon, as suggested above.