tabs switching cause scrolling up

Summary

app scrolls up when I have tabs after some widgets and switch them

Steps to reproduce

Code snippet:

import streamlit as st

for i in range(20):
    st.markdown("dummy text")


tab1, tab2 = st.tabs(["tab1", "tab2"])

with tab1:
    st.video(video_path)

with tab2:
    st.video(video_path)

steps :

1. scroll down to the videos
2. switching tabs

Expected behavior:

tabs should be switched and focus stay on video

Actual behavior:

it scrolling up and I have to scroll down again

Debug info

• Streamlit version: 1.11.0
• Python version: 3.8.11

[LukasMasuch]

@RRaphaell Thanks for reporting this issue! I was able to reproduce it and have deployed a demo app here. The underlying issue is that when changing tabs, the height of the actual tab content is not correct for a split second. This influences the full height of the app -> which in turn influences the maximum possible scroll position -> and this causes the unexpected up scroll. This does not happen if there is enough content underneath the tab (try out in the demo app), since in that case the scroll position will not be larger than the maximum possible.

To find a solution here requires a bit more investigation. I tried out the renderAll property of the baseWeb component, but this only fixes it for a second tab change.

[LukasMasuch]

@sfc-gh-tszerszen Thanks for investigating this! I think there are also a few other elements without a fixed height. For example, our built-in chart commands:

import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

for i in range(20):
    st.markdown("dummy text")


tab1, tab2 = st.tabs(["tab1", "tab2"])

with tab1:
    st.line_chart(chart_data)

with tab2:
    st.line_chart(chart_data)

So, we might need to figure out which elements are affected and apply the same fix.

I’d like to set fixed height on first componentDidMount, what do you think about such proposition?

Would be great if we can fix it this way, but this needs some testing if there are any negative side effects. E.g. in some situations, components are reused for different content, so just fixing the height on componentDidMount might lead to wrong height in some situations.