Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color picker not working on Streamlit Share #2689

Closed
andfanilo opened this issue Jan 30, 2021 · 8 comments · Fixed by #3500
Closed

Color picker not working on Streamlit Share #2689

andfanilo opened this issue Jan 30, 2021 · 8 comments · Fixed by #3500
Assignees
Labels
type:bug Something isn't working type:regression This bug is a regression

Comments

@andfanilo
Copy link
Contributor

Summary

Color picker returns SecurityError: Permission denied to access property "document" on cross-origin object on Firefox or SecurityError: Blocked a frame with origin "https://apps.streamlitusercontent.com" from accessing a cross-origin frame. on Chrome, upon color selection.

Firefox :
image

Chrome:
image

Steps to reproduce

App: https://share.streamlit.io/andfanilo/s4a-color-picker-bug/main/app.py
Code: https://github.com/andfanilo/s4a-color-picker-bug

import streamlit as st
st.color_picker("Background color hex: ", "#eee", key="main")
st.sidebar.color_picker("Background color hex: ", "#eee", key="sidebar")

Is this a regression?

yes

@andfanilo andfanilo added type:bug Something isn't working status:needs-triage Has not been triaged by the Streamlit team labels Jan 30, 2021
@nthmost nthmost added type:regression This bug is a regression and removed status:needs-triage Has not been triaged by the Streamlit team labels Feb 1, 2021
@exalate-issue-sync exalate-issue-sync bot added type:regression This bug is a regression and removed type:regression This bug is a regression labels Feb 1, 2021
@andfanilo
Copy link
Contributor Author

andfanilo commented Feb 2, 2021

Looks fixed now. Also saw a post that webcam now works on S4A https://discuss.streamlit.io/t/new-component-streamlit-webrtc-a-new-way-to-deal-with-real-time-media-streams/8669/12 so I suppose you fixed this :) I'll let the S4A app for some time if you want to check again.

@andfanilo
Copy link
Contributor Author

Actually some users have the issue. andfanilo/streamlit-drawable-canvas#41 (comment)

Can't tell what triggers the issue though.

@andfanilo andfanilo reopened this Feb 7, 2021
@raunakdoesdev
Copy link

This is still happening for me, any updates?

@GitHunter0
Copy link

I just tested today and it is still happening for me too

@intergalacticBasil
Copy link

The error is still happening as of today. Interestingly, it works for the library version 0.74.0, but breaks starting from 0.76.0.

@francofgp
Copy link

francofgp commented May 5, 2021

I have the same problem with my app: Here

In my PC (localhost) works fine, but not in streamlit share.

Update: I just deployed the same app, but on Heroku and works just fine :) Heroku App

So I think the issues has something to do with the streamlit share platform, and not the app itself.

@samhaar
Copy link

samhaar commented Jun 3, 2021

FYI I was able to get the color picker to work on the share platform with pinned version 0.73.0 and below

@tconkling
Copy link
Contributor

tconkling commented Jun 30, 2021

Investigation notes:

  • This was working in 0.73.1; it's broken in 0.74.0 +
  • The issue is inside a utility function in react-color's Saturation.js code:
function getContainerRenderWindow() {
    var container = this.container;

    var renderWindow = window;
    while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
        renderWindow = renderWindow.parent;
    }
    return renderWindow;
}

Looks like it's reaching up into the parent iframe.

tconkling added a commit that referenced this issue Jul 6, 2021
On Streamlit Sharing, ColorPicker throws a cross-origin error when its popover window is closed. There's an issue open in the react-color repo (casesandberg/react-color#806) - but it's months old and hasn't had a developer response.

With this PR, we now swallow all SecurityErrors thrown within `<ColorPicker>`. ColorPicker's functionality remains intact.

Here's a sample app running on Sharing with this frontend fix: https://share.streamlit.io/tconkling/st_colorpicker_test/main/app.py

Fixes #2689
ConorIA added a commit to ConorIA/mpcnc-colour that referenced this issue Jul 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:bug Something isn't working type:regression This bug is a regression
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants