Background transparency issue with iframe elements #242
Description
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:
- https://www.reddit.com/r/css/comments/14axek9/why_does_iframe_have_white_background_when_inside/
- https://fvsch.com/transparent-iframes
Now, not sure if there's anything that can be done in pico ?