In particular, ''​background-position''​ does not have this property - if the background area is a 200px square, using ''​background-position:​ 75%;''​ and ''​background-position:​ 150px''​ give substantially different results. ​ As such, ''​calc()''​ needs to carve out an explicit exception for ''​background-position''​ if it wants to work in the intuitive way.

In particular, ''​background-position''​ does not have this property - if the background area is a 200px square, using ''​background-position:​ 75%;''​ and ''​background-position:​ 150px''​ give substantially different results. ​ As such, ''​calc()''​ needs to carve out an explicit exception for ''​background-position''​ if it wants to work in the intuitive way.

-

Do not follow the example set by ''​background-position''​. ​ Instead, ensure that percentages and dimensions have the same behavior, start from the same point, etc.

+

**Do not follow the example set by ''​background-position''​. ​ Instead, ensure that percentages and dimensions have the same behavior, start from the same point, etc.**

A working example of a property that was badly-behaved and was then fixed is ''​word-spacing''​. ​ Originally, ''​word-spacing''​ was defined so that lengths were added to the default word-spacing,​ while percentages were relative to the default word-spacing. ​ So, if the default word-spacing was 10px, ''​word-spacing:​ 50%''​ and ''​word-spacing:​ 5px''​ did very different things - the first bunched words together, the second spread them apart. ​ The spec was changed to make both of them add to the default word-spacing. ​ Now, both of the above examples spread words apart the same amount, which is friendly with ''​calc()''​.

A working example of a property that was badly-behaved and was then fixed is ''​word-spacing''​. ​ Originally, ''​word-spacing''​ was defined so that lengths were added to the default word-spacing,​ while percentages were relative to the default word-spacing. ​ So, if the default word-spacing was 10px, ''​word-spacing:​ 50%''​ and ''​word-spacing:​ 5px''​ did very different things - the first bunched words together, the second spread them apart. ​ The spec was changed to make both of them add to the default word-spacing. ​ Now, both of the above examples spread words apart the same amount, which is friendly with ''​calc()''​.