Bug with st.tabs(), glitches for 1 frame while rendering

On the first rendering of items in tabs that are long, they glitch out for a brief moment. This is what they look like in that moment:

Video demonstration:

As you can see, this only happens the first time they are rendered, they’re fine after that.

Example code:

import streamlit as st
st.write("##  Example site")

tab1, tab2, tab3, tab4, tab5 = st.tabs(
    [
        "Tab 1",
        "Tab 2",
        "Tab 3",
        "Tab 4",
        "Tab 5",

    ]
)

with tab1:
    form = st.form("tab 1 form", clear_on_submit=True)
    uploaded_files = form.file_uploader("Upload files")
    form.form_submit_button("submit")

with tab2:
    form = st.form("tab 2 form", clear_on_submit=True)
    uploaded_files2 = form.file_uploader("Upload files")
    form.form_submit_button("submit")

with tab3:
    st.write("# Hi")
    st.write("## make this longer")

with tab4:
    st.write("# fine")

with tab5:
    st.write("# This is not fine because it is long")
    
1 Like

Any ideas? Could someone point me to this part of the source code maybe?

This even happens on the st.tabs documentation page (st.tabs - Streamlit Docs):


I think this might be what you’re looking for.

Thanks, did some traversal and I think it’s this autosizer that is causing this problem:

I think it is just taking too long to calculate the proper width.