Text is Raised on Linux, Mac, and Mobile, but NOT on Windows | Mantine | Page 1

errant sentinel Mar 31, 2026, 7:56 PM

#

The first picture is my hamburger nav bar in windows, the second is the same in android. Why is the text higher?

#

Look especially at how Home and About are above their Icons

shrewd fog Mar 31, 2026, 8:27 PM

#

Seems like an issue with the new CSS feature, I'll fix it in the next patch

errant sentinel Mar 31, 2026, 8:32 PM

#

When has this been in effect?

#

I don't really keep up with Mantine updates

#

I think...

#

One second.

#

  "dependencies": {
    "@mantine/core": "^8.3.13",
    "@mantine/dates": "^8.3.15",
    "@mantine/dropzone": "^8.3.14",
    "@mantine/form": "^8.3.14",
    "@mantine/hooks": "^8.3.13",
    "@mantine/modals": "^8.3.15",
    "@mantine/notifications": "^8.3.14",
    "@react-router/node": "7.12.0",
    "@react-router/serve": "7.12.0",
    "@tabler/icons-react": "^3.36.1",
  }

shrewd fog Mar 31, 2026, 8:38 PM

#

Nah, then not related to your issue

errant sentinel Mar 31, 2026, 8:44 PM

#

Wahh

#

Wait so what could the issue be, then?

#

Let me provide my root.css

#

/* Website settings */
html {
  scrollbar-gutter: stable;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

html body[data-scroll-locked] {
  margin-right: 0px !important;
}

/* Variables */
:root {
  background: var(--mantine-color-body);

  /* Widths and Heights */
  --header-height: 3.5rem;
  --scrollbar-width: 8px;
  --border-thickness: 1px;

  --border-radius: var(--mantine-radius-default);

  --transition-speed: 0.1s;

  --z-index-min: -100;
  --z-index-front: 12;
  --z-index-default: 0;
  --z-index-back: -12;
  --z-index-max: 100;

  --main-breakpoint: var(--mantine-breakpoint-sm);

  --shadow: var(--mantine-shadow-md);

  /* Light colors */
  --foreground-color-light: var(--mantine-color-gray-0);
  --foreground-color-highlighted: var(--mantine-color-gray-1);

  --border-color-light: var(--mantine-color-gray-1);

  /* Dark Colors */
  --foreground-color-dark: var(--mantine-color-dark-6);
  --foreground-color-dark-highlighted: var(--mantine-color-dark-5);

  --border-color-dark: var(--mantine-color-dark-5);
}

/* Scrollbar */

* {
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-thumb {
  background-color: light-dark(
    var(--mantine-color-gray-6),
    var(--mantine-color-dark-3)
  );
}
::-webkit-scrollbar-track {
  background-color: light-dark(
    var(--mantine-color-white),
    var(--mantine-color-body)
  );
}

::-webkit-scrollbar-corner {
  background-color: light-dark(
    var(--mantine-color-gray-6),
    var(--mantine-color-dark-3)
  );
}

errant sentinel Apr 5, 2026, 10:58 AM

#

okay this just turned out to be an issue with the font that I was using

#Text is Raised on Linux, Mac, and Mobile, but NOT on Windows