White background styling on <img> makes transparent images and alt text unreadable

[glmvc]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate#css_property_cost

What information was incorrect, unhelpful, or incomplete?

Following line of CSS is causing images with transparency being nearly unreadable (in this case)
.main-page-content img {background: #fff}

If images are not loaded/found, the alt text is not visible either (dark theme)...

The border property within this rule looks also weird in this case, but this might be a global design decision.

What did you expect to see?

The images are readable without the white background (also the alt text in dark mode).

The white background probably had or has some purpose; or maybe not?

I don't know what's the best solution here. Just adapting the images? But of course it can be that this problem occurs with other images as well...

The (font) color should also be set, if a background property is present?

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

current view:

without the background set to white:

MDN metadata

Page report details

• Folder: en-us/web/performance/animation_performance_and_frame_rate
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/performance/animation_performance_and_frame_rate/index.md
• Last commit: 6bff95b
• Document last modified: 2023-02-24T06:17:52.000Z

[wbamberg]

It's quite a strange presentation all round.

Perhaps we could just replace this whole thing with text, like:

- Properties that affect an element's geometry or position trigger:
    - a style recalculation
    - a layout
    - a repaint
  For example: `left`, `max-width`... 

[glmvc]

@wbamberg Alright, I will replace it with your suggestion and remove the images.
But what about the issue with unreadable alt text in the dark theme regarding a11y? I think a dark text color should be added to the mentioned css rule, where the background-color is set to white...? Should I file a separat issue? What would be the right repo for this?