Learn section hero images and cards have an extra white background

[robdodson]

Describe the bug A page like https://web.dev/learn-web-vitals/ displays a hero image to the right. This image seems to have an unintentional white background that's being added with CSS.

The selector is:

img[src$=".svg"], img[src$=".png"] {
    background-color: var(--color-transparent-img-mask);
}

But that seems maybe overly aggressive(?) because it gives a white background to every SVG on the site. It also appears when you hover the cards on the /learn page.

Expected behavior The SVGs would have a transparent background. Here's the same page with the selector removed:

[jeffposnick]

Looking at https://github.com/GoogleChrome/web.dev/pull/6975, I believe this has to do with changes implemented in support of dark mode. Though arguably this specific example doesn't look ideal in dark mode, either:

Hopefully this is something that @hankchizljaw can look into as a follow-up of that earlier PR.

[Andy-set-studio]

The idea was that all of these illustrations need to be re-artworked because they were designed to only support light mode. Without any background, the black strokes disappear and it was always intended to be temporary.

I would definitely suggest looping in some design eyes to see how illustrations like this could be reworked to support multiple themes.

[robdodson]

ah that makes sense, I didn't realize the dark mode had shipped yet. Looks nice!

As a short term fix, would it make sense to add the white background only when the user is in dark mode? Something like:

[data-user-theme="dark"] img[src$=".svg"], img[src$=".png"] {
    background-color: var(--color-transparent-img-mask);
}

[Andy-set-studio]

Yeh --color-transparent-img-mask is defined at the theme level and is currently set to light-bright which is white. A good fix would be to maybe add a transparent value for the colour design tokens and use that instead.

[tomayac]

The same color, var(--color-transparent-img-mask), also adds an ugly white-ish background to icons with rounded corners on author pages. Just removing the background color from the social icons would fix the problem.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. To prevent this from happening, leave a comment.

[rakshitgondwal]

Is this issue still open?

[tomayac]

The issue is definitely still present on author pages.

[rakshitgondwal]

Hey @tomayac Thanks a lot for the response! Actually I was thinking that wouldn't by removing the background using photoshop and then replacing the old image with the new one solve this issue?

[tomayac]

The original comment describes the issue: an overly aggressive selector that applies a background color to all SVGs.

[mamieorine]

The solution for this would involve recreating a dark-mode version of each image.

@tokyodanj will work on recreating the set of illustrations in support of dark mode.

[tokyodanj]

@matthiasrohmer would you like us to recreate dark-mode versions of all the artwork in the next sprint?

[tokyodanj]

Matthias would like us to create the dark-mode specific artwork as soon as we have capacity. To be confirmed if this will be possible in the latest sprint.

[tokyodanj]

Dark-mode artwork created - ready for review before adding to site.

[dstmarthe]

Thanks for raising this. We are moving to a new platform so the UI will be different in many parts. I can already confirm that the Collection pages and specifically this Core Web Vitals page will not have this problem. So, closing this as it will not be an issue after the move and content on this site is now frozen.