markup icon indicating copy to clipboard operation
markup copied to clipboard

HTML element `picture` has `visibility` set to `hidden` for no apparent reason

Open peterfritz opened this issue 2 years ago • 1 comments

I've been searching for a way to use images in GitHub without they automatically being linked for quite some time. Today I found this Stack Overflow answer with a solution for this problem, but the images seem to randomly appear and disappear as richbl points out in his comment. That doesn't seem like expected behavior, so I decided to open an issue here.

Reproduction

Bellow are 10 img elements, each being wrapped by a picture tag. Note that some or all of them might be missing.

GitHub GitHub GitHub GitHub GitHub GitHub GitHub GitHub GitHub GitHub

If you see all or none of the images, try reloading the page or switching between light and dark themes.

Code

This works but the image is automatically linked:

<img alt="GitHub" title="GitHub" src="https://img.shields.io/badge/GITHUB-181717?style=for-the-badge&logo=github&logoColor=FFFFFF" />

This makes it so the image isn't automatically linked but the image isn't consistently shown:

<picture>
  <img alt="GitHub" title="GitHub" src="https://img.shields.io/badge/GITHUB-181717?style=for-the-badge&logo=github&logoColor=FFFFFF" />
</picture>

peterfritz avatar Sep 13 '23 14:09 peterfritz