[Website Bug]: Layout shift when switching between the React/Angular/Vue code tab in Safari

[bk7312]

Description

Layout shift when switching between the React/Angular/Vue code tabs in Safari (or any browser on iOS and iPadOS). Does not happen on other desktop/Android browsers.

Minimal Reproduction

1. In Safari, open Part 2 of the Framework Field Guide, https://unicorn-utterances.com/posts/ffg-fundamentals-intro-to-components, and scroll to the code tabs.
2. Switch between the React/Angular/Vue tabs.
3. The code tab will jump to the vertical center of the page.
4. Scroll up or down a bit and repeat step 2 to repeat the behavior.

Exception or Error

NA

[fennifith]

Thanks for the report!

This was the intended behavior - as a workaround since Safari doesn't support CSS overflow-anchor just yet. That said, I'll leave this open as there might be a better JS solution that preserves the scroll position.

For anyone looking at contributing: src/utils/markdown/tabs/tabs-script.ts is the place to look :)

[Gungier]

@fennifith I can see if I can implement some JS to account for that vertical jump. I believe I also noticed a flash of unstyled content when it shifts.

[bk7312]

@fennifith @Gungier I've created a PR to solve this issue, please have a look. Thanks

Don't think I can do anything about the flash though, it happens because the code tabs above it expand/shrink too much, causing everything to shift before the scroll kicks in. One solution would be to give the code tabs a fixed height (maybe based on screen size instead of an absolute value) with overflow scroll, that should get rid of the flash/content shift.

Unrelated: The scrollIntoView() on handleKeydown is redundant as scrolling is handled by handleClick on tab.click(), so I commented it out.