Image Banner section - Overlay incorrectly applied to transparent png images

[zacalexander]

Describe the current behavior

• When a transparent .png image is used in the Image Banner theme section, an overlay is added to the image. This occurs even when the Image overlay opacity setting is set to zero.

Describe the expected behavior

• An image overlay will only be applied to the Image Banner section when the Image overlay opacity setting is greater than zero.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 2.3.0 and 2.4.0
• Chrome Version 95.0.4638.69 (Official Build) (arm64)
• macOS Version 12.0.1

Additional context/screenshots Tested with various different .png images, and only seems to occur when the image is transparent. The transparent .png of the Shopify logo can be used to replicate the behaviour, though any transparent .png should behave similarly.

[ADTC]

I had to add an inline CSS as a hack to solve this:

#Banner-{{ section.id }} .banner__media {
  background-color: transparent;
}

But yes, definitely this is a problem that must be resolved otherwise.

[melissaperreault]

I am confirming this is still an issue on Dawn Version: 8.0.0

• Image banner doesn't support transparent PNG images