search

github / markup

Determines which markup library to use to render a content file (e.g. README) on GitHub
MIT License
5.85k stars 3.4k forks source link

Dark mode image only loads on fresh load #1681

Open evoactivity opened 1 year ago

evoactivity commented 1 year ago

As can be seen in this repo README logo file , click on issues then back to code and the light image will be loaded instead of dark.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./logo-dark.svg">
  <img alt="XMLTV. TypeScript tools for working with EPG data." src="./logo.svg">
</picture>
osiegmar commented 1 year ago

The bug goes even further. None of the <source> elements will be used but the fallback <img>.

Markdown source:

<picture>
    <source media="(prefers-color-scheme: dark)" type="image/avif" srcset="...">
    <source media="(prefers-color-scheme: light)" type="image/avif" srcset="...">
    <img src="..." alt="">
</picture>

First (or refresh) load (works correctly, shows the first source):

<picture>
    <source media="(prefers-color-scheme: light),(prefers-color-scheme: dark)" type="image/avif" srcset="..." class="source-dark">
    <source media="not all" type="image/avif" srcset="..." class="source-light">
    <img src="..." alt="" style="visibility:visible;max-width:100%;">
</picture>

Navigate back (works incorrectly, shows the fallback img):

<picture>
    <source media="not all" type="image/avif" srcset="..." class="source-dark source-light">
    <source media="not all" type="image/avif" srcset="..." class="source-light">
    <img src="..." alt="" style="visibility:visible;max-width:100%;">
</picture>
frankie567 commented 1 year ago

We also experience this behavior. It seems to work with the Sync with system setting but not when manually selecting a single dark theme.

On page navigation, GitHub renders the media query as not all, as @osiegmar pointed out.

evoactivity commented 1 year ago

Just noticed this seems resolved now? If others confirm I'll close this issue.

frankie567 commented 1 year ago

Just noticed this seems resolved now? If others confirm I'll close this issue.

Just tried again, doesn't seem fixed on my side. It works when using Sync with system but not when manually selecting a dark theme.

evoactivity commented 1 year ago

I have the Dark Default theme manually selected, but I also have several feature previews turned on that may be where the fixes are.

frankie567 commented 1 year ago

Hmm... Still happening here. Maybe they're currently rolling out changes?

Capture d’écran 2023-09-13 à 17 19 57
evoactivity commented 1 year ago

I played with it a bit more, seems inconsistent, sometimes it loads the correct image.

osiegmar commented 1 year ago

I created a repository for demonstration purposes including steps to reproduce: https://github.com/osiegmar/github-dark-mode-bug

Feel free to send pull requests if you know more scenarios.

github-actions[bot] commented 2 months ago

Stale issue message

frankie567 commented 2 months ago

This is still true as of July 2024 😊

github-actions[bot] commented 2 weeks ago

Stale issue message

evoactivity commented 2 weeks ago

Still an issue