See the Code - See it Full Page - See Details
Thought a lot of demos (most of the ones in [this specialized Custom Properties collection](http://codepen.io/collection/npNMYb/)) were broken in Microsoft Edge because of the combination of transforms and custom properties. However, this example shows the issue is actually more about how Edge interprets unitless variables inside of `calc`. ### The short version ``` :root { --unitless: 200; --unitful: 200px; } div { transform: translateX(var(--unitful)); /* Edge likes this */ transform: translateX(calc(200 * 1px)); /* Edge likes this */ transform: translateX(calc(var(--unitless) * 1px)); /* Edge does not like this */ } ``` ### What the demo is doing in fuller detail At an interval, translate each box 200px back and forth. The first box is the control for Custom Properties/CSS Variables. It takes a px value (including unit) inside a variable and translates that amount. Default variable value is 0px, `moved` value is 200px The second box is the control for calc. No variable is used here. Just goes from a 0 translation to a `translateX(calc(200 * 1px))` which will convert a unitless number into a px value. The third box is the combination. It uses the calc equation from the second box, but replaces the 0 or 200 hardcoded value with the var(--unitless). This works as expected in Chrome, Firefox, and Safari. Breaks in Edge's initial Custom Properties release (Edge 15).
This Pen uses: HTML, CSS, JavaScript, and