Tabs flickering alignment

Design help General
1

I’m trying to use the native Tabs component but I don’t know why it starts aligned to the left and then goes centered (I did this on purpose) when the page finishes loading.
Public page
Loom with behavior
Any ideas?
Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi,
A lot going on that page.
Not sure but for me it looked like it worked better if you drag the i-section to the top just under body.
Try that.

3

wow, not perfect but improved a lot. Thanks

4

Good to hear.
Think what is happening is the screen is being drawn after the tab box has been drawn.
So fixing the page or delaying the tab draw is an option to look at.

5

I’m not sure where to start to delay the tab draw. Can you give me some clues?

6

Give me a sec I am looking at it now.

7

Try page load and use opacity on the best item, I cant see what that is as I got a blob of blue all over the screen.
Remember to set the element to 0% as well as default state to stop flickering.

8

Oh, sorry about the blue div. I always change the display to block before Publish, I’m not sure but seems to work better even with the initial state set.

Yes, hiding it while the page loads can be a good option. I’ll try