CSS calc() is not supported, elements become incorrectly sized or not rendered at all. #986

FloatingSponge · 2024-12-09T15:18:38Z

CSS calc() does not appear to be supported, causing elements styled with it to not render correctly.

Example, in the sandbox:

<html>
<head>
<style>
.box1 {
  border: 1px solid green;
  height: 60px;
}
.box2 {
  border: 1px solid red;
  height: calc(30px + 30px);
}
</style>
</head>
<body dir="auto">
<div class="box1">
  height set using height 60px
</div>
<div class="box2">
  height set using height calc(30px + 30px)
</div>
</body>
</html>

renders the first div correctly at 60px height, but the height for the second one is ignored and the sandbox log shows
Found whitespace where one of a number, a percentage, a pixel value, an em value, an ex value, a pica value, a millimeter value, a centimeter value, an inch value, a point value, an angle value, a time value, a freq value, a string, an identifier, a URI, a hex color, or function was expected at line 7. Skipping declaration.

If you use calc(30px+30px) (without whitespace around the "+") you get the error:
(null#inline_style_1) Value for height must be an identifier, length, or percentage at line 7. Skipping declaration.

Margings, paddings and border widths sized using calc() will all render incorrectly as the value is skipped entirely.
Borders sized with calc() are not rendered at all.

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS calc() is not supported, elements become incorrectly sized or not rendered at all. #986

CSS calc() is not supported, elements become incorrectly sized or not rendered at all. #986

FloatingSponge commented Dec 9, 2024 •

edited

Loading

CSS calc() is not supported, elements become incorrectly sized or not rendered at all. #986

CSS calc() is not supported, elements become incorrectly sized or not rendered at all. #986

Comments

FloatingSponge commented Dec 9, 2024 • edited Loading

FloatingSponge commented Dec 9, 2024 •

edited

Loading