Understanding How Browsers Handle Zero: setTimeout, +0/-0, +[], font-size, width/height, line-height, and transform

Zero is a special value that behaves differently in various browser contexts; this article explores how browsers treat zero in JavaScript timers, numeric comparisons, type coercion, and CSS properties.

1. setTimeout

When the delay argument is 0, browsers may clamp the timeout to a minimum (4 ms after five nested timers, 1 ms without nesting in Chrome, 2 ms in Edge). Example code:

window.setTimeout(() => { /* ... */ }, 0);

Observed output differences across Chrome, Firefox, Edge, QQ, and 360 browsers are discussed.

2. +0 and -0

Although +0 === -0 is true, they are distinguishable with Object.is , which returns false for Object.is(0, -0) . The article lists the equality rules of Object.is .

3. +[]

Unary plus coerces an empty array to 0 , and complex expressions like the one on jsfuck.com can produce alert(1) through type conversion tricks.

4. font-size:0

Setting font-size:0 makes text invisible and removes the “strut” that can increase line‑box height; browsers differ on minimum font sizes for values below 12 px.

5. width & height:0

Zero dimensions hide elements, but for accessibility a .visually‑hidden class with 1 px size and clipping is recommended.

6. line-height:0

Zero line‑height affects non‑replaced inline elements, line‑level block elements, and block containers differently; the article explains each case.

7. transform: translateZ(0)

Applying transform: translateZ(0) forces GPU acceleration, creating a separate compositing layer that can improve animation performance.

References: CSS‑Tricks hide techniques, W3C CSS2 specifications.