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.

Sign up for GitHub

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

Jump to bottom

Background transparency issue with iframe elements #242

Open
pm98zz-c opened this issue Dec 14, 2023 · 0 comments
Open

Background transparency issue with iframe elements #242

pm98zz-c opened this issue Dec 14, 2023 · 0 comments

Comments

@pm98zz-c
Copy link

Hi there, and thanks for pico.css, first of all.
I could not pinpoint how or why yet, but it looks like pico is somehow messing up with iframe elements transparency. I noticed it when trying to add a widget to my website, but was able to reproduce with a number of other ones.
Whatever the iframe content, it always ends up being displayed with a white background, which clashes with the main page.

I've added a minimal example to reproduce the issue (to be used with the system/browser set to dark mode).

First one, without pico, where the iframe does correctly pick up the background color:

<html>
<body style="background:#000">
<iframe 
		src="https://static.store.app/widget/badge/index.html?sitePath=delapartdunami-fr&theme=dark" 
		style="width: 100%; height: 122px; border: none;">
</iframe>
</body>
</html>

Second one, with pico, where the iframe always displays a white background:

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
</head>
<body>
<iframe 
		src="https://static.store.app/widget/badge/index.html?sitePath=delapartdunami-fr&theme=dark" 
		style="width: 100%; height: 122px; border: none;">
</iframe>
</body>
</html>

I can't find anything that would set that directly, but it looks like it is tied to the color-scheme property:

Now, not sure if there's anything that can be done in pico ?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@pm98zz-c