Chrome 37 Calc Rounding

Chrome 37 calc rounding

This is a known Chrome bug that is now fixed and will soon be merged to the dev Channel.

https://code.google.com/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified

CSS calc() rounding

This issue was fixed in Chrome some time ago.

https://bugs.chromium.org/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified

Why doesn't css-calc() work when using 0 inside the equation?

The first equation is invalid because it will lead to calc(-10px + 0)

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

And if the result was non-zero you will fall into this:

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.

Related question: Why doesn't min() (or max()) work with unitless 0?

calc not working ie 11

"-" should be surrounded with spaces width:calc(80% - 100px);

Demo

Formatting a number with exactly two decimals in JavaScript

To format a number using fixed-point notation, you can simply use the toFixed method:

(10.8).toFixed(2); // "10.80"

var num = 2.4;
alert(num.toFixed(2)); // "2.40"

Note that toFixed() returns a string.

IMPORTANT: Note that toFixed does not round 90% of the time, it will return the rounded value, but for many cases, it doesn't work.

For instance:

2.005.toFixed(2) === "2.00"

UPDATE:

Nowadays, you can use the Intl.NumberFormat constructor. It's part of the ECMAScript Internationalization API Specification (ECMA402). It has pretty good browser support, including even IE11, and it is fully supported in Node.js.

const formatter = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 2,      
   maximumFractionDigits: 2,
});

console.log(formatter.format(2.005)); // "2.01"
console.log(formatter.format(1.345)); // "1.35"

Heights rendering differently in Chrome and Firefox

So first you have the W3C standards, which are a set of guidelines for browser makers.

And then you have the browser makers, who are free to do whatever they want (as evidenced by a history of deviations by Internet Explorer).

In particular, with CSS percentage heights, there are clear differences in behavior among browsers.

You've posted one example. Here's another:

Percentage Heights in Flexbox: Chrome/Safari vs Firefox/IE

When working with flexbox, Chrome and Safari resolve percentage heights on flex items based on the value of the parent's height property. Firefox and IE11/Edge prioritize the parent's flex height.

It appears Webkit browsers adhere to a more traditional interpretation of the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

In other words, for percentage height to work on an in-flow child, the parent must have a set height.

That is the traditional interpretation of the spec: The term "height" means the value of the height property. My own view is that this language is vague and open to interpretation, but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage values.

Recently, however, Firefox and IE have broadened their interpretation to accept flex heights, as well.

Examples of Firefox and IE using a parent's flex height as reference for a child's percentage height:

• Chrome ignoring flex-basis in column layout
• Chrome / Safari not filling 100% height of flex parent
• Height is not correct in flexbox items in Chrome
• Flexbox in Chrome--How to limit size of nested elements?

Knowing which browsers are in compliance with the spec is a bit difficult because, as I mentioned before, the spec language seems vague and open to interpretation.

With the last update to this part of the definition being in 1998 (CSS2), and the advent of new forms of height such as flex height, an update seems long overdue.

I think it's fair to say that when it comes to percentage heights, until the spec definition gets an update, you can expect rendering differences among browsers.

---

Alternative Solutions

Here are two alternatives to consider when wanting a child element to take the parent's full height.

1. Apply display: flex to the parent. This automatically sets align-items: stretch, which tells the child to expand the full available height of the parent.

2. Apply position: relative on the parent and position: absolute; height: 100%; width: 100% on the child. With absolute positioning, a percentage height will work without a specified height on the parent.

Force Chrome to use subpixel rendering for floats

Browsers round fractional pixels automatically and this is browser specific, some round it up, some down; There is no way to force it to do one or the other with CSS.

A solution could be to work with LESS, there are functions for that (ceil, floor).

But if you need a solution with CSS I would just suggest define the width as calc(100% - 0.5px) / calc(100% -1px) or 99.9%. That's just not perfect, but a solution. You can adjust it as you like and as it works for you.

But I'm not sure your problem comes from that.
Take a look at the following fiddle and tell me if it solves your problem. Instead of floating I use a layout based on display:inline-block here, and it seems like there is not such a problem.
https://jsfiddle.net/a693yj52/

---

Related Topics