slartibartfast slartibartfast - 2 months ago 15
CSS Question

Using transform() and calc() in firefox

Am I missing something obvious, or does firefox not like using calc() inside transform:skewY() ?

The problem



the following transform works, no problem :

body article {
postion:relative;
top:50%;
transform-origin:left;
transform:skewY(-15deg) translateY(-50%);
}


however trying to use calc() doesn't. Not in firefox in any rate, although chrome renders the skew() as expected :

body article {
postion:relative;
top:50%;
transform-origin:left;
transform:skewY(calc(-1rad * 3.14 / 12)) translateY(-50%);
}


I would usually assume that this is something that firefox doesn't do, but their official documentation says :


The calc() CSS function can be used anywhere a length, frequency, angle, time, number, or integer is required.


( source : https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility )

So I'm thinking that the fault is mine. Can anyone see something wrong with the syntax in the transform ?

the context



<html>
<body>
<article>
<header>title</header>
<div>article content</div>
</article

<!-- more articles... -->

</body>
</html>


with css that looks something like this :

body {
white-space:nowrap;
}
body article {
display:inline-block;
width:200px;
height:400px;
}
body article header {
height:50px;
}
body article div {
height:calc(100% - 50px);
}


What I'm trying to do is accurately line up the skewed elements in a horizontal gallery. I'm also open to any lateral thinking =)

Answer

There is Bug 956573 - calc() CSS function doesn't work with all data types (units) that it should, such as times (from 2014 but still open) in the issue tracker.

One comment (also from 2014) has a code snipped with the comment // calc() currently allows only lengths and percents inside it.

Because there is no further comment that more units are support now and also given the fact that the comment is still in the current source (49.0.1) including a further limitation And note that in current implementation, number cannot be mixed with length and percent. I would assume that it is still the case, that Firefox still does only support lengths and percents.

if ((aVariantMask & VARIANT_CALC) &&
    IsCSSTokenCalcFunction(*tk)) {
  // calc() currently allows only lengths and percents and number inside it.
  // And note that in current implementation, number cannot be mixed with
  // length and percent.
  if (!ParseCalc(aValue, aVariantMask & VARIANT_LPN)) {
    return CSSParseResult::Error;
  }
  return CSSParseResult::Ok;
}
Comments