st.data_editor jitters on mobile/narrow layout (embedded doc example)

[MathCatsAnd]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

When viewing the docs on mobile, the embedded example of st.data_editor jitters with an interior scrollbar rapidly appearing and disappearing.

Reproducible Code Example

No response

Steps To Reproduce

(On Chrome on a Google Pixel 5)

1. Go to https://docs.streamlit.io/library/api-reference/data/st.data_editor
2. Look at the second example (first one with dynamic rows)
3. Data editor jitters as in gif above

Expected Behavior

It should have a steady display.

Current Behavior

It jitters as shown in the recording.

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: (currently nightly, I think)
• Python version: 3.9
• Operating System: Android 13 (latest at time of posting)
• Browser: Chrome 114.0.5735.130 (latest at time of posting) also DuckDuckGo
• Virtual environment: n/a

Additional Information

I was not able to reproduce the jitter in Chrome or Firefox in Windows (with simulated mobile dimensions).

I was able to reproduce the bug in DuckDuckGo on the same Google Pixel 5 device. I could also reproduce the issue in Chrome on a Galaxy Note 8.

Are you willing to submit a PR?

• Yes, I am willing to submit a PR!

[xl0]

Getting the same thing on the desktop (Chrome Version 116.0.5845.96 (Official Build) (64-bit)) as well.

To clarify, this is happening with a local streamlit and my own code too, but can be easily reproduced in he docs.

[javioatwork]

Same happens to me (Version 116.0.5845.180 (Build oficial) (64 bits).
If I move the browser window from the 13" laptop screen to the 27" screen it stops flickering.
It does not occur with Microsoft Edge for example.

[willhuang1997]

Supposedly, this bug has been occurring since 1.22.0 from what I can tell and only on chrome.

@xl0 and @javioatwork and @sfc-gh-dmatthews , when you resize the df, will the jitter stop or the df is completely unusable?

Are there any console logs that you can provide me with to debug this problem?

[xl0]

@willhuang1997 , resizing can get it to stop jittering, but it takes many attempts, so I'd say it's unusable.

Nothing in the dev tools logs that looks relevant.

[EMjetrot]

I'm experiencing this error in Windows 10 Enterprise (22H2) in the latest Edge and Chrome browsers, but not Firefox. I'm using Streamlit 1.26.0.

Here is Chrome 117.0.5938.150 (64bit):

Here is Edge 117.0.2045.60 (64bit):

Here is Firefox 118.0.1 (64bit):

Observations

• The error shows up in Windows 10 Enterprise (22H2) in the latest Chrome and Edge browsers, but not Firefox.
• The error does not show up on a Mac (Ventura 13.6) in the latest Safari, Chrome and Firefox browsers.
• Developers and users experience this on their laptop displays, but not on external screens connected to the laptop.
• The jittering seems to be dependent on the content of the table, e.g. some data can be displayed without the jittering, while other data seems consistently activate it.
• The error seems to exist no matter if we use st.dataeditor, st.dataframe or create our own html table and show it using st.write.

Should the title of this issue be updated to reflect that it seems like all table visualisation tools in Streamlit are affected in Chromium-based browsers?

[jenshnielsen]

Could this issue be fixed by #7281? It seems to fit the description in that issue.

[sfc-gh-dmatthews]

Today I witnessed the jitter on Chrome on MacOS. When I resized the window, I got this error:

This was on the latest nightly build (Streamlit v1.27.3.dev20231012).

[kmcgrady]

@sfc-gh-dmatthews Would you mind taking a look one more time on this on the latest official version. I believe some changes @LukasMasuch on the scrollbar may have helped here.

[jenshnielsen]

@kmcgrady I am unfortunately still seeing the same issue with 1.28.1. I am seeing tabels resize both on a freshly loaded page and some that are only triggered by hovering on the table. This is accompanied by significant cpu load from the page and the page frequently becoming unresponsive. Resizing the window eventually triggered a https://legacy.reactjs.org/docs/error-decoder.html/?invariant=185 react error from all tables on the page.

This is observed in Edge on Windows 11 on a 4 K monitor. The issue seems specific to the monitor resolution.

[EMjetrot]

I've also upgraded to the latest Streamlit version and I still experience the error in the latest Chromium-based browser. And yes, it seems to have something to do with resolution/zoom as exampled in the gif below.

[jenshnielsen]

Looking at the browsers developertools (performance tab recording 5 sec) I see an infinite loop of calls to Recalculate_Style like the one below

[jenshnielsen]

I also noticed that when this happens, I am seeing the horizontal scrollbar of a table that is supposed to be use_container_width
It seems like the table is drawn slightly to wide which triggers a redraw

[sfc-gh-dmatthews]

@sfc-gh-dmatthews Would you mind taking a look one more time on this on the latest official version. I believe some changes @LukasMasuch on the scrollbar may have helped here.

@kmcgrady I just checked on my Pixel 5 and the example in the original post is no longer jittering. Confirmed in Chrome and DuckDuckGo. That example is currently running Streamlit v1.28.1.dev20231026. That nightly version does have a handful of commits not in 1.28.1 or 1.28.2 so if there's something in there that's impacting then we might be good. If not, I might need to try some more scenarios to see if it's a fluke.

I also retested the example that yielded the minified react error (first snippet from this forum post). I used the latest nightly (Streamlit v1.28.3.dev20231115) and it no longer jitters or yields the minified react error. (Relatedly, @LukasMasuch reported a resizing bug to a dependency, so could there be any interaction there?)

I was able to reproduce the jitter on Streamlit v1.28.3.dev20231115. 😞

[sfc-gh-dmatthews]

On macOS Sonoma, using Streamlit v1.28.3.dev20231115 in a clean environment, Python 3.11.5, Chrome:
Using this code (with another unused page to populate navigation and create a sidebar:

import streamlit as st
import pandas as pd

df = pd.DataFrame({"A": [1,2,3],"B":[4,5,6],"C":[7,8,9]})

a,b = st.columns([2,1])
a.data_editor(df, use_container_width=True)

If the sidebar is closed, going from 649->648 pixels of width for the app/window triggers the jitter (fairly reliably).
If the sidebar is open, going from 1063->1062 pixels of width for the app/window triggers the jitter (fairly reliably).

It doesn't seem to jitter when coming up from a smaller size. And the "fairly reliably" comes from some variation at the +1 pixel size. You can watch the scrollbar (or void where the scrollbar should be) and sometimes you need to go +2 pixels then back down to the jitter-point.

The minified react error also occurs around this jitter-point if adjusting the width more aggressively than one pixel at a time.

[sfc-gh-dmatthews]

Screen recording of the above comment:
https://github.com/streamlit/streamlit/assets/135349133/4c134e43-7c46-4643-88ac-3ff766187d97

[J-PRS]

For anyone who needs a quick fix:

st.write('''<style>
[data-testid="stDataFrameResizable"] {
        border: 2px solid rgba(250, 250, 250, 0.1) !important;
}
</style>''', unsafe_allow_html=True)

Anything other than the default 1px border seems to get rid of the jitter.

[EMjetrot]

@J-PRS You are right - the quick fix fixes it. Thank you :)

[kmcgrady]

FYI @J-PRS @EMjetrot @jenshnielsen @xl0 @javioatwork I was playing with a solution for this, and I found some solution that can be fixed with #7733 . Essentially there's some rounding errors happening that's creating a misjudgment of sizing the dataframe cannot decide, and so it switches between the two (the jitter effect)

1. The initial fix is testable via: https://pr-7733.streamlit.app/ - would love to see if the jitter
2. Add ?scrollType=round to the url and try to make the jitter - https://pr-7733.streamlit.app/?scrollType=round
3. Add ?scrollType=ceil to the url and try to make the jitter - https://pr-7733.streamlit.app/?scrollType=ceil

(2) and (3) handle a potentially different rounding error. I'm detecting between the round (this mimic browser philosophy) or whether it should be ceil (this is giving the largest size possible to ensure it's always supposed to work.

The URL allows you to run some arbitrary code for testing, but I can provide a link to the wheel file to test locally.

[xl0]

I can still get it to jitter without scrollType by maximizing the table and changing zoom. The same happens if I change the window size.

[xl0]

With scrollType=round, after a bit of fiddling, I got this error, and it did jitter eventually, but was harder to trigger:

Error:

Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at fl (https://pr-7733.streamlit.app/~/+/static/js/main.c2fa1e01.js:2:2315789)
at xa (https://pr-7733.streamlit.app/~/+/static/js/main.c2fa1e01.js:2:2287551)
at https://pr-7733.streamlit.app/~/+/static/js/7673.fbe65640.chunk.js:2:336394
at https://pr-7733.streamlit.app/~/+/static/js/7673.fbe65640.chunk.js:2:351564
at https://pr-7733.streamlit.app/~/+/static/js/7673.fbe65640.chunk.js:2:295277
at https://pr-7733.streamlit.app/~/+/static/js/7673.fbe65640.chunk.js:2:295479
at https://pr-7733.streamlit.app/~/+/static/js/7673.fbe65640.chunk.js:2:291657
at https://pr-7733.streamlit.app/~/+/static/js/7673.fbe65640.chunk.js:2:291899
at Dl (https://pr-7733.streamlit.app/~/+/static/js/main.c2fa1e01.js:2:2327525)
at t.unstable_runWithPriority (https://pr-7733.streamlit.app/~/+/static/js/main.c2fa1e01.js:2:3105377)

[xl0]

Same with scrollType=ceil, error+jitter, but it was much easier to trigger.

[LukasMasuch]

I also did a few tests and was able to eventually run in jitter with 1 & 3 as well. But not with 2 (scrollType=round). But it feels like getting a lot less likely. The scenario from this comment was not reproducible for me with any of the three mitigations.

@xl0 I believe the error you get is a different issue. I have seen an error before in Streamlit a couple of times in situations of quick and excessive resizing of the browser window. But it is unlikely that this is something to appear in any normal usage scenario.

[jenshnielsen]

I can reproduce the jitter in the maximized Data_Display_Tester for all 3 scenarios.

[LukasMasuch]

We might have finally found a fix for the jitter issue and the maximum depth error. You can try this version here or download the wheel. It would be awesome to get another round of testing from community :) (cc @jenshnielsen @xl0 @EMjetrot @J-PRS).

[LukasMasuch]

The fix is merged and will be released in 1.32. Hopefully, I will never see a jittering dataframe again :)

[sfc-gh-jesmith]

Just wanted to follow up that the updates are live as of the latest release 1.32.2. 🥳

Thanks everyone for your valuable input and feedback!

[upasana-mittal]

We are still getting this flickering issue with latest streamlit version 1.32.2. We have a multi page app which is embedded in iframe of another app.
and on loading, all of the charts flickers until we resize the dashboard

[LukasMasuch]

@upasana-mittal Do you use altair / vega lite charts? In that case, you are probably running into the issue reported here.

[upasana-mittal]

@upasana-mittal Do you use altair / vega lite charts? In that case, you are probably running into the issue reported here.

We are using plotly charts

[LukasMasuch]

@upasana-mittal In that case, this sounds like a new issue. It would be awesome if you could create a new issue for this.