Determinism Decay is the progressive and irreversible loss of predictable behaviour as data travels from the server — where everything is knowable, reproducible, and correct — to the browser, where everything depends on the operating system, the installed fonts, the screen resolution, the DPI scaling, the browser version, and whether the user has dark mode enabled.
The phenomenon was first described as a mechanism of The Frontend Event Horizon during the April 2026 mermaid diagram incident, in which a two-node flowchart rendered correctly on Linux and exploded into a cathedral-sized void on Chrome/Windows, consuming forty-five minutes of developer time in what was supposed to be a five-minute CSS fix.
“The Go code compiled in 1.2 seconds. The Go code was correct. The Go code rendered the mermaid syntax exactly as documented. And then the browser said ‘yes but what if the viewBox were enormous’ and forty-five minutes happened.”
— riclib, The Frontend Event Horizon
The Decay Gradient
Determinism Decay follows a measurable gradient from server to screen:
Layer 1: The Server (Determinism: 100%). A Go function generates a string. The string is the same every time. The function compiles in 1.2 seconds. The function is correct. The function does not care about your fonts.
Layer 2: The Transport (Determinism: 99%). HTTP delivers the string. The string arrives intact. Occasionally there is a timeout. The timeout is the system’s last honest failure — it tells you “I couldn’t.” Everything after this point will tell you “I did” while meaning something else.
Layer 3: The DOM (Determinism: 90%). The browser parses the HTML. The DOM is built. The structure is correct. But the measurements have begun to diverge. An element’s offsetWidth depends on the font. The font depends on the font stack. The font stack depends on what’s installed. What’s installed depends on the operating system. Determinism has begun to decay.
Layer 4: The Render Engine (Determinism: 60%). CSS is applied. height: auto means “whatever the browser thinks is appropriate,” which is three different things on three different operating systems. max-width: 100% constrains the width but not the viewBox. overflow: hidden hides the overflow but not the container’s layout commitment to the overflowed content. Every CSS property is a treaty between the specification and the implementation, and treaties are interpreted differently by different nations.
Layer 5: The Screen (Determinism: 30%). The user’s DPI scaling multiplies every pixel by a factor that varies between 1 and 3 depending on the device, the operating system version, and the user’s accessibility preferences. A 400-pixel-wide element is 400 pixels on one screen, 800 on another, and 1200 on a third. All of them report width: 400px. The measurement is correct. The pixels are different.
Layer 6: The Screenshot (Determinism: 0%). The client sends a screenshot. The screenshot was taken on a device you do not own, using a browser you did not configure, with fonts you do not have, at a DPI you did not choose, with dark mode enabled because “does that matter?” Yes. It matters. Everything matters. That is the terminal stage of Determinism Decay.
The Font Metric Divergence
The most thoroughly documented mechanism of Determinism Decay is Font Metric Divergence: the fact that the same font-family declaration resolves to different physical fonts on different operating systems, and different fonts have different metrics, and different metrics produce different layout calculations, and different layout calculations produce screenshots that make the developer question their career.
The mermaid.js font stack:
trebuchet ms, verdana, arial, sans-serif
On Linux, Trebuchet MS is not installed. The browser falls back to a generic sans-serif. On Windows, Trebuchet MS is installed and used. The fonts have different character widths. The character widths produce different node measurements. The node measurements produce different viewBox calculations. The viewBox goes from 0 0 400 80 to 0 0 400 2000.
The Go code did not change. The mermaid syntax did not change. The CSS did not change. The operating system changed. And the operating system is the variable that no unit test covers, because testing “does this look right on Windows” requires having Windows, and having Windows requires a level of commitment that most developers have not made.
The Time Dilation Corollary
Determinism Decay correlates directly with time dilation. As determinism decreases, the time required to fix the resulting bug increases exponentially:
Layer Determinism Typical fix time
Server 100% Seconds (compiler tells you)
Transport 99% Minutes (retry or increase timeout)
DOM 90% Minutes to hours
Render Engine 60% Hours (CSS archaeology)
Screen 30% Hours to days (device-specific)
Screenshot 0% Undefined (the client says "it looks wrong"
and you cannot reproduce it because
you do not have their fonts)
A bug at the server is found by the compiler. A bug in HTML is found by the validator. A bug in CSS is found by the client’s screenshot on the client’s browser on the client’s operating system at the client’s screen resolution with the client’s installed fonts and the client’s DPI scaling and the client’s “oh I have dark mode on, does that matter?”
Yes. That matters. Everything matters. That is Determinism Decay.
“The Go side stays deterministic. The browser invents new ways to interpret ‘height: auto.’ Between the two, time becomes relative. Like close to a black hole.”
— riclib, after the fourth commit for what was supposed to be one CSS fix
Measured Characteristics
Server determinism: 100%
Browser determinism: varies
(that's the problem)
(it varies)
viewBox height (Linux): ~80px
viewBox height (Windows): ~2000px
Font metric divergence factor: 25×
Fix estimate (developer's): 5 minutes
Fix actual (wall clock): 45 minutes
Time dilation factor: 9×
CSS approaches tried: 3
CSS approaches that worked: 0
JavaScript lines that actually fixed it: 16
Go code changes required: 0
(the server was never wrong)
(the server is never wrong)
(the browser is never consistent)
See Also
- The Frontend Event Horizon — The boundary where Determinism Decay produces measurable time dilation
- CSS — The gravitational field in which determinism decays fastest
- Go — The calm, deterministic room on the server side
- Boring Technology — Boring on the server; chaotic on the client; the asymmetry is the bug
