csstools / sanitize.css

A best-practices CSS foundation
https://csstools.github.io/sanitize.css
Creative Commons Zero v1.0 Universal
5.21k stars 314 forks source link

Background transparency issue with iframe elements #242

Open pm98zz-c opened 10 months ago

pm98zz-c commented 10 months ago

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 ?