St.html is applying empty-html class to a non-empty div when going back to my landing

[jwasdfdsf]

First: I know I sholdn’t be using streamlit for this, but I’m being forced ;-;

Env: locally.
MacOSX 14.5 Sonoma
Python 3.11.9
Poetry 1.8.2
Streamlit 1.35.0
Watchdog 4.0.0 for performance.
Google chrome and firefox have the same behaviour.

Can’t share the link to the github repo because of NDA.

What I’m I doing?

A purchase flow with a landing, a second and more consecutive pages.

How the heck I am doing it?

Disclaimer: this code can’t replicate the issue.

I have an enum of ‘pages’.

from datetime import datetime
from enum import StrEnum, auto

import streamlit as st


class Pages(StrEnum):
    LANDING = auto()
    SECOND = auto()

Then, each page is a class:

class Dialog:
    @st.experimental_dialog("Let's continue!")
    def render(self):
        st.write("hello? 2")
        continue_pressed = st.button("Continue")
        if continue_pressed:
            st.session_state["current_page"] = Pages.SECOND
            # call to rerun to close this dialog
            st.rerun()  # this can't be called from a callback!!!


class Landing:
    def __init__(self) -> None:
        self.dialog = Dialog()

    def render(self):
        st.html("<h1>hola</h1>")
        st.html("<p>how are you?</p>")
        pressed = st.button("to second page!")
        if pressed:
            self.dialog.render()


class SecondPage:
    def render(self):
        st.button("back to landing~", type="secondary", on_click=_to_landing)
        st.html("<h1>on second page!</h1>")
        st.html("<p>asdf</p>")

And I have this callback definition:

def _to_landing():
    st.session_state["current_page"] = Pages.LANDING

So, I’ll start on the landing page. If I click on the button, it will open an experimental dialog that will send me to the second page.
In the second page I have a button that switches to the landing page [this is the step that has the issue, but i couldn’t replicate it].

And, this is what I have on my main function:

def main():
    st.set_page_config(layout="wide")
    st.session_state["pages"] = {Pages.LANDING: Landing(), Pages.SECOND: SecondPage()}
    if st.session_state.get("current_page") is None:
        st.session_state["current_page"] = Pages.LANDING
    current_page = st.session_state["current_page"]
    print(current_page)
    current_page_func = st.session_state["pages"][current_page]

    # render
    current_page_func.render()


if __name__ == "__main__":
    print("running again (", datetime.now(), ")")
    main()

The actual issue:

I’m adding this h1 title with the st.html function:

When I switch to the next page and then go back, this is how the HTML looks on the inspector.

But when I resize the inspector, window or do anything to trigger a rerender, it gets fixed:

Known workarround

Using st.markdown instead of st.html “fixes” the issue.

What do I need?

Well, I’ve been searching on the nternet and nothing pops up. I’ve ended up reading the streamlit code and found this:

Which I think looks right, but, do anyone knows why going back causes my div having no height?