wiki.selfhtml.org grid-layout broken - Maybe a browser bug?

[AndieM]

Pale Moon 33.7.2 (64-bit) (GTK 3)
Debian 12 (stable/Bookworm), using the MX-Repo-Package from Steve Pusser
☑ I tested it with a fresh PM-profile, no add-ons.
https://wiki.selfhtml.org/

Hi,
I'm not sure, if it's a website bug (I'm a bit pessimistic) or a bug in Pale Moon. If it's confirmed, feel free to move this thread.
I just want to make sure, that it's not a problem on my setup first, before opening a bug report.

The selfhtml-wiki (in Germany quite old & known site on html, css, js…) has a layout problem.
It seems like the combined grid-property of the body element is not correctly interpreted, if the width is greater than 40em (…media-query).

As result the layout gets completely broken, with the nav floats above the content, nothing clickable, etc. (See screenshot 1)

The respective css-rule (pretty-printed), looks valid for me, but I am no expert in grid-layout:

Code: Select all

grid: "selfnav selfnav" var(--selfnav-height) 
      "leftnav persnav" auto 
      "leftnav content" auto 
      "leftnav footer " 1fr 
      / var(--mw-panel-width) minmax(1em,60em);

Raw excerpt from the css-file (that is minified…, https://wiki.selfhtml.org/load.php?debu ... n=selfhtml):

Code: Select all

@media (min-width:40em){body{--content-margin-inline:0.75rem;display:grid;grid:"selfnav selfnav" var(--selfnav-height) "leftnav persnav" auto "leftnav content" auto "leftnav footer " 1fr / var(--mw-panel-width) minmax(1em,60em);column-gap:0.7em;padding:0}}

The Error console and the Developer Console are completely empty:

Code: Select all

(none)

It might be a bug in parsing the combined grid-property?

Because if I extract the `grid-template-areas`-part and add it manual with the Inspector (…or via userscript), than the website renders afaict as the property specifies it. (Also adding -rows and/or -columns with the respective content doesn't alters the rendering further for me.)
(Screenshot 2, don't know if the `leftnav`-column is rendered as it intended, but that's another question):

Code: Select all

grid-template-areas: "selfnav selfnav" "leftnav persnav" "leftnav content" "leftnav footer "

Can somebody confirm, that it's a general problem with PM on the website?
Did I miss something?

Off-topic:
Kind of funny …and not : if you can read up the information on the css properties for the hot fix on the same site that shows the problem…

[Moonchild]

Not sure who designed that mediawiki theme but I really don't think it will render well in a lot of browsers.
I loaded it up in Edge and even there the site looks half-broken to me and has a really strange page layout. (very similar to the result you achieved with grid templating correction, but with a few more visual effects filled in).

[adoxa]

It doesn't like grid containing var; here's a userstyle to fix it (along with the missing logo, due to unsupported aspect-ratio).

Code: Select all

@-moz-document domain("wiki.selfhtml.org") {
  body {
    grid: "selfnav selfnav" 2.5em "leftnav persnav" auto "leftnav content" auto "leftnav footer " 1fr / 19vw minmax(1em,60em)
  }
  .self-logo {
    height: var(--logo-size)
  }
}

Alternatively, here's a Modify HTTP Response filter, which also fixes colors (unsupported light-dark, assumes light) and the bottom navigation bar (assuming a minimum width of 42em; unsupported @container).

Code: Select all

[["wiki.selfhtml.org",["/mediawiki\\.legacy/",["/aspect-ratio:1/1/g","height:var(--logo-size)","\" var(--selfnav-height)","\" 2.5rem"," var(--mw-panel-width)"," 19vw","/light-dark\\(([^,]*),var\\(.*?\\) ?\\)/g","$1","/var\\(--cont-height\\)/g","3rem","/var\\(--cont-arrow\\)/g","1.5rem","max-width:25em;","max-width:unset;grid:\"prev prev main next next\" 3rem / 1.5rem 1fr 1fr 1fr 1.5rem;"]]]]

It doesn't fix the list links (unsupported :has) nor the paragraph chain icon (svg doesn't support style).