markup icon indicating copy to clipboard operation
markup copied to clipboard

Dark mode image only loads on fresh load

Open evoactivity opened this issue 2 years ago • 18 comments

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>

evoactivity avatar Apr 08 '23 21:04 evoactivity

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>

osiegmar avatar May 13 '23 04:05 osiegmar

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.

frankie567 avatar Sep 04 '23 07:09 frankie567

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

evoactivity avatar Sep 13 '23 14:09 evoactivity

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.

frankie567 avatar Sep 13 '23 14:09 frankie567

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

  • New Repository Overview
  • Global Navigation Update

evoactivity avatar Sep 13 '23 14:09 evoactivity

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

Capture d’écran 2023-09-13 à 17 19 57

frankie567 avatar Sep 13 '23 15:09 frankie567

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

evoactivity avatar Sep 13 '23 16:09 evoactivity

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.

osiegmar avatar Sep 16 '23 17:09 osiegmar