Transparent images loose transparency in WP 4.8 image widget

[jpnl]

If you add a transparent .png image to the image widget that was introduced in WordPress version 4.8, it looses it's transparency. In the attached screenshot you see the same transparent image that has been added to a footer widget.

The first one has been added with the Simple Image Widget plugin. The second one is the same image ut it has been added with the native image widget that has been introduced in 4.8.

At first this was caused by the image having a caption, but after removing that, the image still isn't transparent.

[jpnl]

Replying to jpnl:

At first this was caused by the image having a caption, but after removing that, the image still isn't transparent.

Had a closer look and it's caused by CSS class .wp-caption which is also applied when the image does not have a caption. It does that in the image widget, it doesn't do it in a normal post.

Normally, when you add an image to a post, it gets a different markup depending on whether it does or does not have a caption:

Without caption
<img class="alignnone wp-image-117868 size-medium" src="​http://mydomain.nl/wordpress/wp-content/uploads/image.png" alt="" width="300" height="180" />

With caption
[caption id="attachment_117868" align="alignnone" width="300"]<img class="wp-image-117868 size-medium" src="​http://mydomain.nl/wordpress/wp-content/uploads/image.png" alt="" width="300" height="180" /> with captioncaption

And that triggers this css
.wp-caption {

max-width: 96%;
margin-bottom: 10px;
padding: 8px;
padding-top: 4px;
border: 1px solid #ddd;
background-color: #f3f3f3;
text-align: center;

}

[subrataemfluence]

Hi @jpnl,
I just tried to reproduce the issue using 4.8 native Image Widget plugin but it came along nicely for me. Please see the screenshot.

[jpnl]

Replying to subrataemfluence:

Hi @subrataemfluence,

Could it be because your page background is gray, same as the image background color?
What happens when you add a caption to the image? Does it show a background color then?

Thanks!
JP

[subrataemfluence]

Replying to jpnl:
I just checked by adding a caption and changing my background color to dark green. The transparency still works. Please see screenshot.

Replying to subrataemfluence:

Hi @subrataemfluence,

Could it be because your page background is gray, same as the image background color?
What happens when you add a caption to the image? Does it show a background color then?

Thanks!
JP

[subrataemfluence]

Transparency is retained with caption and with a darker background

[jpnl]

Mmm...
I looked a bit deeper and it's the theme that adds the background color.
I am sorry, I should have looked further before reporting this.
Thank you for your time!

JP

[subrataemfluence]

Replying to jpnl:
No problem. Glad I could help! I had a feeling that CSS or some plugin in your application was responsible for this. :) good that it has now been sorted out.

Mmm...
I looked a bit deeper and it's the theme that adds the background color.
I am sorry, I should have looked further before reporting this.
Thank you for your time!

JP