Using a transparent PNG as a background image changes the background color when published

[bmattb]

Bug Description

https://stories-new-wordpress-amp.pantheonsite.io/wp-admin/post.php?post=22680&action=edit#page=%25222b16d777-54a7-486f-913e-7c3a822b050b%2522

Using a PNG with a dominant color and a transparent background consistently replaces the background tranparency with the dominant color on publish, resulting in a story page that is dramatically different from what was in the editor.

This may be happening when the user uses the same image for the poster image as well.

Expected Behaviour

Steps to Reproduce

1. Create a story page and use a PNG with a transparent background
2. Preview the story, you will note that the preview shows that the background color is filled with the primary color of the image
3. Publish the story and you will see the same thing happening.

Screenshots

Additional Context

• Plugin Version:
• WordPress Version:
• Operating System:
• Browser:

[swissspidy]

Explanation:

When adding background media like this, we use its base color (aka average color) as the page background color. This is useful on slow internet connections because you'll already see a color while the image is loading.

Introduced in #3638 / #4766 (version 1.1.0)

To handle transparent images like this we'd probably need to detect whether there is transparency and then not add the color in that case.

A workaround would be to just use this as a regular image and not a background image.

[swissspidy]

A workaround would be to just use this as a regular image and not a background image.

Or not use an image with transparency