Default CSS preventing embedded tweets from having transparent borders

[perpil]

Context

I'm trying to embed a tweet into my site. In dark mode, borders on a tweet show up as white and not transparent. It has something to do with material css. If I create a blank html page with a dark background and embed a tweet the corners look fine. I cut this as a discussion originally but it also happens on the mkdocs material site. I have been unable to pinpoint which piece of material CSS is causing this.

Bug description

Material's CSS is causing corners on embedded tweets to look bad in dark mode when they are rendered.

Related links

• Reporting a bug
• Discussion #6602

Reproduction

9.5.13+insiders.4.53.1-css-twitter-embed-corners.zip

Steps to reproduce

1. Embed a tweet on any mkdocs material site in dark mode. Or look at this page in dark mode.
2. Corners will be square and white instead of the color of the background.

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[alexvoss]

The tweet is embedded using an iframe. That means that all of the styling of it is controlled by Twitter and is unrelated to the styling applied by Material. I am afraid that there is no pure CSS way to influence the styling. You can get Twitter to render the tweet in dark mode by adding data-theme="dark" to the embed code. However, that makes things worse...

I could not find anything on the embedded tweet parameter reference that would change the background of the iframe. Not sure if it is possible to do from outside as the browser security model should prevent this? Unless you can convince Twitter to put a dark themed embedded tweet into an iframe with a dark background, I am afraid you may be stuck. That said, I am not an expert on matters of web design, so there is a chance I have missed a trick.

[squidfunk]

@perpil is right – it does not happen with the mkdocs and readthedocs themes, only material seems to replace the transparent background. I've not yet managed to find out why. It's very weird. Here's readthedocs with red background for demonstration purposes. If you switch to material, the background appears.

[squidfunk]

This line is causing the problem:

mkdocs-material/src/templates/assets/stylesheets/palette/_scheme.scss

Line 34 in 9d387d0

color-scheme: dark;

If you remove the declaration, borders are transparent. I'm not sure why. This might be a bug in or an interference with Twitter's CSS. We should not remove the color-scheme declaration, because it denotes to the browser that it should render unstyled UI elements in light or dark appearance. For this reason, I've added a new declaration in 1d6dd99, which will reset the property for iframes only, fixing the problem:

[perpil]

Thanks for the quick work, I tested it and it does indeed resolve it for the repro I attached, but when you set a palette, it doesn't. You can repro by toggling to dark mode with what I attached. Is there a fix that works if for all scenarios?

9.5.13+insiders.4.53.1-css-twitter-embed-palette.zip

[squidfunk]

Hmm, indeed, very strange. I'd expect that color-scheme: initial resets the value appropriately, but it doesn't. My testing shows that color-scheme: auto seems to fix both cases, so I applied it in 8244ff3. Can you confirm?

[perpil]

I'm on the insiders version, can you push it there too?

[squidfunk]

I just did, could you please check master?

[perpil]

Hmm, it still looks like this for me on Firefox 123.0 Mac:

But it looks fine on Chrome 122:

[squidfunk]

I have not tested Firefox. I'll look into it again. This is really weird...

[squidfunk]

Related: https://fvsch.com/transparent-iframes

[squidfunk]

I think it's fixed with 750b798 (already on Insiders). color-scheme: light omits the background in Chrome, Safari and Firefox on macOS. However, reading the article, it seems to be underspec'd or a browser bug.

[perpil]

That did it! Thanks!

[squidfunk]

Released as part of 9.5.14.

[squidfunk]

The changes had another side effect – now Giscus rendering is broken in Chrome. I'm not yet sure how we can ensure that both work. It seems to be an inconsistency between Chrome and Firefox.

[squidfunk]

I'm sorry, but we have to revert the changes we made to fix the issue mentioned here. The reason is that I currently see no way forward to fix this in a general fashion. If we apply color-scheme to .md-typeset iframe, it will override any value set by the iframe itself. For instance, this will lead to Giscus looking like this (screenshot from our website right now):

Twitter expects us to set color-scheme to light, or you will get the borders we tried to fix here. Giscus expects us to set it to light dark. Thus, it is very much dependent on the contents of the iframe what value you need. Another option would be to refrain from setting color-scheme entirely, but would decrease accessibility, as unstyled form elements will now always appear light, even in dark mode. We could try to use a selector like .md-typeset :not(iframe), but that is even more invasive and have unforeseen other side effects, as it would mean that this selector would apply to every element inside .md-typeset, except for iframes.

For this reason, I decided to revert the changes we made in 750b798 until a better solution is found. I'm quite at the end of ideas how to support borderless arbitrary iframes. If somebody cooks up a solution, please create a PR!

[squidfunk]

The ideal solution would be Twitter's CSS setting the value on the iframe, or Firefox fixing the problem.

[perpil]

Is it possible to override the color-scheme for just twitter tweets in my extra css? The twitter iframe always is inside a div with class twitter-tweet

[squidfunk]

Yes, of course, this should do the trick:

.twitter-tweet iframe {
  color-scheme: light;
}

[perpil]

Ok that's a good enough workaround for me if you don't want to pollute the main css with it, I tested it and it works in FF and Chrome, thanks!

[squidfunk]

Perfect, thanks! Sorry for the inconvenience this is causing, but I hope my explanation made sense and outlines that the situation is tricky, to say the least.