Problem with 'Show Photo' and Dark Theme/Transparency in standard widget.

Kyuur
@Kyuur Robert Felizardo

Hello folks,

Busy working away at a new website that has a twitter feed embedded via the standard list widget. I've come across a bit of a problem with styling.

We are using the transparency option to allow the background colour of the page to come through, and the dark theme for readability of the text. However, when an embedded tweet has a photo attached, and the "Show Photo" link shows up below, the little image next to the text has the background colour of the dark theme.

This doesn't occur with the light theme, the image is transparent. I'm not sure why there is a difference here. Any chance on having this fixed?

1 week 6 days ago

Replies

Kyuur
@Kyuur Robert Felizardo

A slight bump, this issue seems to stem from the sprite that the widget grabs from https://platform.twitter.com/images/sprite.png

It boggles my mind that no changes occur for the retweet, reply, favorite buttons that are pulled from this exact sheet. Can a twitter dev explain why this is the case? I'm not seeing any workarounds other than simply not having a transparent background and ruining the coherency of the website (which is what that option is there for), or doing some painful CSS injection which has been discouraged on these forums in this topic: https://dev.twitter.com/discussions/11386

The CSS causing this issue in question is: .thm-dark i.ic-pho

1 week 6 days ago
vincentisambart
@vincentisambart Vincent Isambart

This does indeed look like a bug. I filed an issue for it:

Issue #1269: When using a dark theme and a transparent background the icon to show the card has a black background

If an embedded timeline is set up with a dark theme and transparent background (data-theme="dark" data-chrome="transparent"), the icons to show the card (the one at the left of for example "Show Summary" or "Show Photo") have a black background. If you have a dark background that's not completely black, it doesn't look good.
The other icons seem to be properly displayed with a transparent background though.

Updates

Should now be fixed

1 week 5 days ago
Kyuur
@Kyuur Robert Felizardo

Thank you for your help Vincent! I'll keep an eye on the status.

1 week 1 day ago
vincentisambart
@vincentisambart Vincent Isambart

It should now be fixed. Could you check?

1 week 1 hour ago
Kyuur
@Kyuur Robert Felizardo

The initial issue is fixed! Great, thanks!

Unfortunately, another issue popped up. The icon's background is now highlighted with the link colour when you hover your mouse over the link. This doesn't occur under other settings:

Dark Theme, No Transparent - The icon is highlighted with the link colour, background remains the same.
Light Theme, No Transparent - Same as above.
Light Theme, Transparent - Only the text "Show Photo" is highlighted, the icon stays the same colour.

I hope that makes sense. This is less of an issue as it only pops up when they mouse over the link, but it would still be nice to have the uniform functionality across all theme options.

5 days 5 hours ago