Closed
Bug 1169004
Opened 9 years ago
Closed 7 years ago
Keyframe animations do not work when mixing units inside a calc()
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: jcarpenter, Unassigned)
References
(Blocks 1 open bug)
Details
While working on web VR CSS layout in Nightly, observed that keyframe animations do not play if units are mixed within a calc function. Specifically, combining undefined values (eg 0) with centimeters (eg 4cm), causes the animation to fail (does not play). Observed in Nightly 40.0a1 (special CSS VR branch created by Vlad Vukicevic & Kevin Grandon) I can reliably reproduce this bug. - - - - - - - - - - - Fails (animation does not play): @keyframes frameHide { from { transform: translate3d(0, 0, 0; } to { transform: translate3d(0, 0, calc(0 + 4cm); } <--- mixed units } Works (animation plays): @keyframes frameHide { from { transform: translate3d(0, 0, 0; } to { transform: translate3d(0, 0, calc(0cm + 4cm); } <--- cm }
Comment 1•9 years ago
|
||
Dupe of 956573?
Component: Layout → CSS Parsing and Computation
Flags: needinfo?(cam)
I don't think so. This ought to go through, in StyleAnimationValue.cpp, StyleAnimationValue::AddWeighted() -> case eUnit_Transform -> AddTransformLists() -> case eCSSKeyword_translate3d -> AddTransformTranslate() -> AddCSSValueCanonicalCalc(). I'm not sure why it wouldn't work.
Oh, but actually, I think the problem is just that calc(0 + 4cm) is a syntax error. I think implicit units on '0' don't work inside of calc().
Comment 4•9 years ago
|
||
> I think implicit units on '0' don't work inside of calc().
That's correct. Per spec they do not.
Updated•9 years ago
|
Flags: needinfo?(cam)
Updated•7 years ago
|
Blocks: calc-issues
Comment 5•7 years ago
|
||
From the spec: 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.[1] [1] https://drafts.csswg.org/css-values-3/#calc-type-checking
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•