Please do not calculate the percentage in calc()

[yisibl]

Original issue: evanw/esbuild#1821 (esbuild has been resolved).

.foo {
  width: calc(100% / 3);
}

lightningcss minifier output

.foo{width:33.3333%}

esbuild(old version) minifier output

.foo{width:33.33333%}

Any attempt to calculate and then simplify the percentages in calc() can be dangerous! Please turn off this feature by default.

Demo: https://codepen.io/yisi/pen/OJxVXYo

(Mac Chrome 89.0.4389.82)

Although a new version of Chrome switched to TableNG to fix this issue, there are still many other browsers that use older versions of Blink.

Please make sure that the CSS minifier does not break the page layout, in which case the number of compressed bytes is not that important.

See also: https://stackoverflow.com/questions/31719624/displaytable-div-with-percentage-width-1px-bug

[devongovett]

Interesting. In my tests, browsers round percentage values to 3 decimal places. See https://codepen.io/devongovett/pen/vYeGgzO. I round to 4 just to be safe. I can't seem to reproduce the issue in your original codepen (https://codepen.io/yisi/pen/OJxVXYo) in any browser either...

[yisibl]

Thank you for your reply.

This is a browser bug that only occurs with display: table. I could probably write more examples, but this one is enough to show that simplifying calc() is unsafe.

Chrome 91 later rewrote the rendering of the Table layout, internally called TablesNG, and this bug was fixed. So I tested it with Chrome 89, and it should reproduce stably in this version.

This is a special case, but my point is that CSS is a Pandora's box and we don't know when the bug will be triggered, especially for percentage rendering which is very complex and involves sub-pixel allocation and precision issues.

I hope the CSS compressor doesn't trigger this bug.