okld/streamlit-ace

Component does not render on iOS devices

RichDom2185 opened this issue · 3 comments

RichDom2185 commented

The editor component only shows up when the iOS device is set to "Request Desktop Website".

Even manually spoofing the user agent does not work.

Any iOS/iPadOS device (even DevTools) will not show the editor at all.

ahmed-881994 commented

I am facing the same issue version 0.1.1 streamlit version 1.29.0
screenshot from PC:
image
screenshot from iphone ios 17.2.1
WhatsApp Image 2024-01-14 at 11 35 16_4c7d91cd

RichDom2185 commented

I am facing the same issue version 0.1.1 streamlit version 1.29.0 screenshot from PC: image screenshot from iphone ios 17.2.1 WhatsApp Image 2024-01-14 at 11 35 16_4c7d91cd

Hi, I figured out a (workaround) solution – after inspecting the rendered HTML on both iOS and non-iOS, it seems like on iOS/iPadOS devices, the initial editor component is not automatically set.

The workaround is to provide an explicit height when creating the component:

from streamlit_ace import st_ace

# ...

st_ace(height=252,
       # ... your other options
      )

I used 252 because that's equal to the default height that would be shown in case you never pass in a height options, but of course feel free to change it accordingly.

Sidenote: When deploying, using a reverse proxy like NGINX to force the user agent to be non-iOS will not work, as Streamlit renders via React on the client side, so this is an issue seemingly specific to the way iOS/iPadOS renders on the client-side. Surprisingly, requesting "desktop website" on iOS/iPadOS also seems to solve the issue, though. Perhaps there might be some weird changes to how iOS/iPadOS renders content when toggling between mobile/desktop mode?

ahmed-881994 commented

@RichDom2185 thank you it worked like a charm 🙏

  • 😄1