[terra-demographics-banner] Background image does not fully extend to container

Bug Report

In some cases if a background image is set on demographics-banner, it does not extend to all borders. A 1 pixel line is visible on either the bottom or right side, depending on the size of the browser window.

Zoom in on the below screenshot. The demographics-banner background image is set to a linear gradient. Notice that the white doc template background bleeds through on the bottom of the demographics-banner.

Could be a browser rounding issue: https://stackoverflow.com/questions/28832046/background-size-leaves-a-one-pixel-line-to-the-right-of-my-browser

Environment

• Browser Name and Version: Chrome
• Operating System and version (desktop or mobile): Mac High Sierra on desktop

[yuderekyu]

Gah weird. In these instances,background-color is set to transparent, while background-image is set to a gradient. If we set background-color to a non transparent value the white line disappears. I have no idea why.

I’m tempted to say inside the clinical theme, we set --terra-demographics-banner-background-color and --terra-demographics-banner-deceased-background-color to solid colors

*Edit If we set background-clip: border-box, the issue disappears. I don’t remember why I set that to padding-box 😦 If this doesn’t have any unwanted side effects, I’ll issue a PR

[supreethmr]

Could this be a box-shadow render error of browser.

Since white line at Bottom of banner appears only with terra-clinical-theme. Clinical theme adds box shadow to banner which is not being added in terra-core theme so I am assuming this could be a box shadow rendering issue of browser’s.

I am not sure that this issue is caused by having box shadow but I have this below example where box shadow property is applied and 1px white line at the bottom of banner can be seen as shown below :

and removing box shadow removes white line from bottom of demographics banner too :