mito-ds/mito

Streamlit iframe height is calculated incorrectly on Safari in Streamlit 1.32.0

Opened this issue · 5 comments

Describe the bug

The height of Streamlit on safari is sometimes incorrect, in the deployed version of Mito. This appears to be deployed currently, and is not related to the height setting changes we made in #1247

See screenshot here:
Screenshot 2024-03-12 at 11 06 27 AM

However, I am having more trouble reproducing this bug in a Streamlit app with a deployed Mito version.

Screenshot-2024-03-12-at-1 52 29PM

We ran into this bug on something deployed on share.streamlit, which means the bug is currently deployed. In checking the versions, we get:

  • Found Streamlit version 1.32.1 in the environment
  • mitosheet 0.1.560

I've confirmed that this not an issue with the height variable, as the height variable is NOT deployed. As such, my guess is that this is an issue with a Streamlit release.

See the release log here: https://docs.streamlit.io/library/changelog
And a relevant looking PR here: streamlit/streamlit#8179

My guess is that we qualify as a slow-loading component (sometimes), which in turn triggers this new skeleton component to be shown, which in turn sets the iframe height -- and there's some inconsistent race condition that causes the height of the iframe not to adjust when the iframe is updated to include the Mito component.

Going to verify that this is the issue by rolling back our version of Streamlit to before this release.

I have confirmed that rolling back to streamlit==1.31.0 fixes this issue, where the Mito iframe height is calculated incorrectly. My guess is a race condition in Streamlit (there's a function called frameHeightCallback that is called in that PR -- I'm guessing it's missing somewhere).

As a temporary workaround, we should just pin Streamlit 1.31.0. I'm going to open an issue on the Streamlit Github as well, and link it here.

Notably, the default height of iframes also changes -- so our message passer component takes up a lot more space now -- which looks awful.

Regarding the iframe height issue, I proposed a workaround here: streamlit/streamlit#7376 (comment).

Hopefully, it will work for you as well.