Examples tabs don't work correctly

[strika]

• When I click "RICH STDLIB", the "TYPING" tab becomes active.
• When I click "TYPING", the "NIL CHECKING" tab becomes active.
• When I click "NIL CHECKING", the "SYNTAX" tab becomes active.
• ...

[straight-shoota]

I have no clue what could cause this.
Maybe we can figure it out with some additional information:

• What browser are you using?
• Does the URL in the location bar update and does the hash correspond to the link or the shown content?
• What section shows if you reload the page without a hash (https://crystal-lang.org/), and with a hash (https://crystal-lang.org/#type_system)?

[strika]

1. I'm using Firefox 139.0.4 on Debian.
2. The hash changes. It corresponds to the content, not the link.
3. When I reload without a hash, the first section is displayed. The tab and the content are in sync. When I reload with a hash, the correct section is displayed. The tab and the content are in sync.

Another thing I noticed - when I keep reloading, the tab changes to the next tab in order. When I reach https://crystal-lang.org/#dependencies, and reload, it stays on that tab.

[straight-shoota]

Weird. I cannot reproduce in the same Firefox version on Windows. Do you have any extensions enabled that might be interfering?

One more question: What happens when you scroll horizontally in the example tabs?

[strika]

Horizontal scrolling works correctly. Tab links and content is in sync when scrolling horizontally.

I see the same behavior in Chromium 137 on Debian.

[ysbaddaden]

That's so waird. I can't reproduce with Firefox 139.0.4 on Ubuntu 22.04 🤨

[straight-shoota]

The mechanism works as follows:

1. The tab controls are links to the respective fragment, but an event listener prevents the default link behaviour.
2. The click event listener finds the target element of the href attribute and scrolls it into view. This mimics scrolling horizontally in the panel.
3. A scroll event listener on the tab container triggers and determines the active section based on the scroll location. This then updates the tab control and history state.

The error must be in step 2 that the scroll behaviour is broken somehow.

This is the respective code:

crystal-website/assets/js/_tabs.js

Lines 60 to 72 in fcc27db

	const scrollIntoViewHorizontally = (
	container,
	child,
	) => {
	const child_offsetRight = child.offsetLeft + child.offsetWidth;
	const container_scrollRight = container.scrollLeft + container.offsetWidth;
	if (container.scrollLeft > child.offsetLeft) {
	container.scrollLeft = child.offsetLeft;
	} else if (container_scrollRight < child_offsetRight) {
	container.scrollLeft += child_offsetRight - container_scrollRight;
	}
	};

I don't recall the exact reason but scrollIntoView() wouldn't work. It was probably because we want explicit positioning into fixed slots.