Transparent images in issue texts makes them unreadable

[HolgerJeromin]

• Browser:
  Vivaldi
• Operating System:
  Windows 7
• Link to page with the issue:
  Remove rendering of natural=marsh gravitystorm/openstreetmap-carto#3829
  and
  Add icon for amenity=school gravitystorm/openstreetmap-carto#120 (comment)

This repo issues often have transparent images.

• Screenshot:
  
  and
  

ref #463

[Mottie]

Hi @HolgerJeromin!

Hmm, I thought we had the background change to white on hover:

.markdown-body img:hover {
    background-color: #fff !important;
}

But I don't see it any more.

[xt0rted]

@Mottie the white background on hover was only when viewing an image in a repo such as this https://github.com/StylishThemes/logos/blob/master/github.dark/githubdark.svg

[silverwind]

Seems like that background effect could be done to all images inside .markdown-body

[the-j0k3r]

@Mottie the white background on hover was only when viewing an image in a repo such as this https://github.com/StylishThemes/logos/blob/master/github.dark/githubdark.svg

If I remember this right, the only effect was for jupyter notebooks images #846 and a page https://github.com/sujitpal/statlearning-notebooks/blob/master/src/chapter2.ipynb

None of the issue reported here are encompassed in that.

Seems like that background effect could be done to all images inside .markdown-body

Edit

I disagree, not all images in markdown body benefit from this, need a more specific selector to handle these without altering all images.

Ah, seems by default all images have a white bg.

.markdown-body img {
	background-color: #fff;
	box-sizing: content-box;
	max-width: 100%;
}

Though this stuff is woven into the generator

also its interesting that the images in gravitystorm/openstreetmap-carto#120 (comment) are dark and many other similar images posted in that topic are not.

Why are we exactly changing this? I reverted this to white as per default and cant see any ill effects

[HolgerJeromin]

also its interesting that the images in gravitystorm/openstreetmap-carto#120 (comment) are dark and many other similar images posted in that topic are not.

The others are PNG without transparency but white background in the image itself.

Why are we exactly changing this? I reverted this to white as per default and cant see any ill effects

Fine with me.

[the-j0k3r]

Why are we exactly changing this? I reverted this to white as per default and cant see any ill effects

@HolgerJeromin

Thats a question more for @Mottie @silverwind @xt0rted cause I cant remember why this was changed, there has to be some reason that escapes me right now.

As is it seems to me that it was just caught up in the generator rule, so Im wondering some exclusion may be a better fix.

[the-j0k3r]

AH I see it, all emoji and other images rendered to png are affected by this, I dont even think the hover solution is nice cause it looks nasty when hovering things around.

I think we should make this optional with a toggle in style settings to restore the white bg if a user prefers it, though with the following CSS (removing the generator portions) seems to be acceptable,

	.markdown-body img[data-canonical-src*="svg"], .markdown-body img.emoji {
		background-color: inherit !important;
	}
	.markdown-body img[src*="png"] {
		background-color: #ccc;
	}

The top handles our svg images in readme + the emoji the bottom handles the issue,

[the-j0k3r]

OK this is more or less handled by StylishThemes/Feature-Override-Styles@06fbdd9

See https://github.com/StylishThemes/Feature-Override-Styles#github-dark and Install the GitHub Dark IMG Background Color usercss