collanon.app - Theme color rendering issue

[thepra]

URL: https://collanon.app

Browser / Version: Firefox 101.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Something else
Description:
Steps to Reproduce:
I've this head properties arriving from the backend as:

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="hsl(215,16%,12%)">
<meta name="background-color" media="(prefers-color-scheme: dark)" content="hsl(215,16%,12%)">

but firefox after rendering the page it does get rid of the "media" part of the meta tag like so:

<meta name="theme-color" content="hsl(215,16%,12%)">
<meta name="background-color" content="hsl(215,16%,12%)">

making theme implementations between dark and light media queries break.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[thepra]

damn, why the submission process didn't pick up the code of the tags? -_-
Anyway, putting it here hopefully:

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="hsl(215,16%,12%)"> <meta name="background-color" media="(prefers-color-scheme: dark)" content="hsl(215,16%,12%)">

Becomes:
<meta name="theme-color" content="hsl(215,16%,12%)"> <meta name="background-color" content="hsl(215,16%,12%)">

[thepra]

damn, why the submission process didn't pick up the code of the tags? -_-
Anyway, putting it here hopefully:

    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="hsl(215,16%,12%)">
    <meta name="background-color" media="(prefers-color-scheme: dark)" content="hsl(215,16%,12%)">

Becomes:

    <meta name="theme-color" content="hsl(215,16%,12%)">
    <meta name="background-color" content="hsl(215,16%,12%)">

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note: The issue is not reproducible on Chrome.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="hsl(25,84%,88%)">
<meta name="background-color" media="(prefers-color-scheme: light)" content="hsl(25,84%,88%)">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="hsl(25,84%,88%)">
<meta name="background-color" media="(prefers-color-scheme: dark)" content="hsl(25,84%,88%)">

Tested with:
Browser / Version: Firefox Nightly 103.0a1 (2022-06-01), Firefox Release 101.0
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[qa_22/2022]

[wisniewskit]

The page's scripts are removing and recreating the meta-tags as it loads:

    e = f.head;
    const w = n=>f.createElement(n),
    a = n=>e.removeChild(n),
// snip
    n.MetaTag = {
      set: t=>{
        t.forEach(t=>{
          let r = i(y).find(i=>n.MetaTag.sameMeta(i, t)) || null,
          u = null;
          r === null && (r = w(y), u = r);
          t.h !== '' && (r.httpEquiv = t.h);
          t.p !== '' && v(r, l, t.p);
          t.n !== '' && (r.name = t.n);
          t.m !== '' && (r.media = t.m);
          r.content = t.c;
          u !== null && e.appendChild(u)
        })
      },

But while before it's removed, the meta-tag has a media attribute, while it's recreating it, the t.m is an empty string, meaning it's lost somewhere during this process.

This is the spot where it's grabbing the media value for later re-use:

      query: () =>{
        const n = eval((i(c + 'meta-elements"]').pop() || {
          text: p
        }).text) || i(s).map(n=>[r(n, l),
        n.name,
        n.httpEquiv,
        n.media,
        n.content]);
        return n.map(n=>({
          p: t(n[0]),
          n: t(n[1]),
          h: t(n[2]),
          m: t(n[3]),
          c: t(n[4])
        }))
      },

Ah. They're expecting meta-tags to have a .media property in the DOM, rather than using getAttribute. So this is basically a duplicate of bz1706179.

One way to work around this would be to run this piece of script early to polyfill that property (before this script at least):

if (!HTMLMediaElement.prototype.media) {
  Object.defineProperty(HTMLMediaElement.prototype, "media", {
    configurable: true,
    get: function() { return this._media || this.getAttribute("media"); },
    set: function(v) { this._media = v; },
   });
}

I've filed issue #33 with jsakamoto/Toolbelt.Blazor.HeadElement to see if they're willing to make this small change to potentially fix other apps relying on this in the future as well.

[wisniewskit]

@thepra, are you a developer at collanon.app? If so, and you'd like some help with working around this issue beyond what I mentioned, please feel free to ping me!

[webcompat-bot]

Generate outreach template

[wisniewskit]

@thepra , if you have some time and are the dev for Collanon.app, @jsakamoto has set up a preview build of Toolbelt.Blazor.HeadElement with a fix for this, if you'd like to test it out!

Also, Firefox is landing a fix for this as well, which should make it into version 106 at this rate. Hopefully this will all make it easier for you!

[thepra]

Sorry for the late recognition, the issue does indeed seems to be already fixed(from my quick test, which is not what the collAnon.app is using now), I'm gonna propose the closing of the issue, thanks for the great work!