User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0 Build ID: 20170413192749 Steps to reproduce: 1. Open https://codepen.io/svincent/pen/PmpxOb?editors=1100 2. Note that a red box appears in the center of a blue outlined box and moves right. You can use the Reset button to restart the animation to see the red box's position more clearly. 3. Uncomment Line 26 of the CSS and observe the animation's behavior. This line states "animation-delay: calc(var(--delay));" Actual results: The animation will start at the left edge of the blue container rather than the center. The calculated values seem to be interpreted as invalid inputs even though they should essentially output an unmodified value. Expected results: The animation should behave exactly the same regardless of whether or not lines 25 or 26 are uncommented.
2 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
It doesn't seem to me there is anything related to variables at all. It seems animation-delay simply doesn't support calc(), and in this specific case, you can remove calc() and just use var(), which would work perfectly.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: CSS Animation timing properties do not accept calc() containing variables → CSS Animation timing properties do not accept calc()
This appears to be fixed by Stylo.
You need to log in before you can comment on or make changes to this bug.