Minor issues in Safari w/Admin Panel Shortcuts

phoenix1@community.nodebb.org

Hello! I'm rather new to NodeBB and the forums, so I will try my best to describe the issue I am experiencing, as currently my NodeBB server is not running so I cannot take a screenshot. This does happen as recently as 4.8.0 however, I did manage to test that when it came out a few days ago

In the administrator's control panel, for the longer sub-menus, there is often a list of shortcuts on the right side of the screen that scrolls with the browser window. If you click on one of those shortcuts, it will (in browsers other than Safari) jump to the relevant section of the submenu.
In Safari, clicking on these shortcuts results in inconsistent behaviour. Sometimes it jumps to the relevant menu section, sometimes it does not jump anywhere or to the incorrect section... Very strange and hard to describe!

I've only seen this happen in Safari, so it's definitely a browser issue, it is an unfortunate one though...with Safari being installed on every Apple device and NodeBB running great on MacOS, it would be great if this minor issue in Safari were addressed as well Thanks very much!

baris@community.nodebb.org

When you are on the page that happens, if you run this in the dev console does it work reliably?

$('[component="settings/toc"] a[href^="#"]').on('click', function (e) {
  const href = $(this).attr('href');
  const $target = $(href);
  if (!$target.length) {
    return;
  }

  $target.get(0).scrollIntoView(true);
  return false;
});

It should replace the default browser behaviour with a JS version that brings the target into view.

phoenix1@community.nodebb.org

@baris Thanks very much for that...it took me a little while to figure out and to test, but I can say with confidence that after entering that script you wrote in the dev console, shortcuts work as expected in Safari! It's the only rendering bug that I've come across thus far, it seems like it could have a simple solution as well!

baris@community.nodebb.org

I will look into adding that in to the admin page.

baris@community.nodebb.org

@phoenix1 does the below also work?

$('[component="settings/toc"] a[href^="#"]').on('click', function () {
	const href = $(this).attr('href');
	const $target = $(href);
	if (!$target.length) {
		return;
	}
	$target.get(0).scrollIntoView(true);
	window.location.hash = href;
	scrollBy(0, -offset);
	setTimeout(() =&gt; {
		tocList.find('a').removeClass('active');
		$(this).addClass('active');
	}, 10);
	return false;
});

It turns out we already use javascript to do the scroll https://github.com/NodeBB/NodeBB/blob/master/public/src/admin/settings.js#L31, so wondering why that code wasn't working but the one I gave you earlier works, one difference is the true paramater passed to scrollIntoView. Let me know if this second version works.

phoenix1@community.nodebb.org

@baris This second version also appears to work in the same manner as the first! I wouldn't be able to say how or why myself, I know very little about JavaScript, but I certainly appreciate the work on this It makes me more confident to use NodeBB on my own site knowing that development is so active!

ben-stokes@community.nodebb.org

> @phoenix1 said:
>
> Hello! I'm rather new to NodeBB and the forums, so I will try my best to describe the issue I am experiencing, as currently my NodeBB server is not running so I cannot take a screenshot. This does happen as recently as 4.8.0 however, I did manage to test that when it came out a few days ago
>
> - In the administrator's control panel, for the longer sub-menus, there is often a list of shortcuts on the right side of the screen that scrolls with the browser window. If you click on one of those shortcuts, it will (in browsers other than Safari) jump to the relevant section of the submenu.
> - In Safari, clicking on these shortcuts results in inconsistent behaviour. Sometimes it jumps to the relevant menu section, sometimes it does not jump anywhere or to the incorrect section... Very strange and hard to describe!
>
> I've only seen this happen in Safari, so it's definitely a browser issue, it is an unfortunate one though...with Safari being installed on every Apple device and NodeBB running great on MacOS, it would be great if this minor issue in Safari were addressed as well Thanks very much!

I also have the same question because I have noticed similar inconsistent navigation behavior in Safari when using pages with multiple sections and shortcut links. Sometimes clicking a shortcut takes me exactly where I expect, while other times nothing happens or the page jumps to a completely different position. It can be difficult to figure out what is causing it, especially when the same functionality works normally in other browsers. Since this issue is appearing in the NodeBB administrator control panel, I wonder whether Safari handles the scrolling or anchor positioning differently, particularly when the submenu is long and the shortcut list remains visible while scrolling.

julian@community.nodebb.org

@Ben-Stokes that's really wild!

The unfortunate thing is we don't have iOS devices on-hand to test. It seems like a frustrating issue though

As for how it works under-the-hood, it's exactly as you imagine, a simple #anchor pointing to an element with the corresponding id (or maybe it's name, I forget now). It should just work.