2026-10-31 13:45 MSTChasing Firefox's pixels
An experiment: laying out web pages inside Evil Engine, styled with Tailwind classes, and checking every line against what Firefox draws.
Garry’s Mod’s menus are web pages. Evil Engine’s interface is going to be written in code, styled with utility classes the way Tailwind does it, because I really hate having a ton of unique styles. So the question was whether the engine could lay out HTML well enough to actually trust it. The answer came out of a side branch of 131 commits.
Firefox is the oracle
Nothing here is eyeballed. Each test page renders in Evil Engine, then headless Firefox renders it at the same size, and the two go side by side. A second tool records what Firefox computes for every element: about 55 style values, the exact colours it paints, and every box down to a thousandth of a pixel.
When the two disagree, the fix comes from how Gecko (Firefox’s engine) does it, for example:
- Text widths are measured in 1/60 px steps, Gecko’s own unit
- Superscript and subscript shift by Gecko’s fixed fractions of the em
- List bullets are drawn with the same bullet font Firefox embeds
- Dotted borders are drawn as squares running clockwise around the box
- Scroll areas reserve Firefox’s 12 px scrollbars
- Baselines round half up, the way Firefox rounds them, and that one fix alone put nine rows of text back on Firefox’s pixels
Borders and shadows follow Firefox’s software painting rather than its GPU path, since that’s what its headless screenshots use.
Tailwind, exactly
The Tailwind compiler is ported too, checked against real Tailwind 4.3.3. Its output matches byte for byte on all but two of 42,877 reference classes and variants. Getting there meant also porting how JavaScript prints numbers and sorts lists, because Tailwind’s output depends on both…
The scoreboard
- All 42 lines of the first test page land on Firefox’s pixel rows
- Table text sits within 0.002 px of Firefox, with every border pixel matching
- 1,734 out of 1,734 computed style values match
- Flex, grid, positioning and overflow pages match Firefox box for box
- The pixels that still differ are well under 1% of each page, and they’re mostly glyph antialiasing
What it isn’t yet
This is still an experiment, and I haven’t committed to it yet. It doesn’t run Garry’s Mod’s own menu, since that needs a full browser running JavaScript. Hover states haven’t been compared against Firefox yet, there are no transitions, and form controls still look like Godot’s.
What it does show is that when the engine draws a page, it can draw it the way Firefox does.
