csstools / csstools/sanitize.css

Background transparency issue with iframe elements

Open
#242 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
CSS
Stars
5.3k
Forks
299
PR merge metrics
No merged PRs in 30d

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:
```

```

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

```

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 ?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.