Skip to content

Calc: The + and - operators must always be surrounded by whitespace #71

@yoavf

Description

@yoavf

Currently, rtlcss will convert background-position: calc(100% - 10px) center; to background-position: calc(100%-(100% - 10px)) center; which is mostly correct, except for the missing whitespace around the added -.

With Chrome 52, this cause misalignment. Manually adding the whitespace fixes the visual problem.

From mdn:

The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage.
The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions