Bug 104390 – calc() not working inside translateX

• Component: CSS
• Status: RESOLVED INVALID

[James Burke]

Created attachment 178253 [details]
test page showing the issue

While -webkit-calc() works for a property like width, this done not seem to work:

.card.second {
    transform: translateX(-webkit-calc(100% - 4.3em));
    transform: translateX(calc(100% - 4.3em));
}

That for is allowed in Firefox 18.

Attaching a test page and a screenshot with the expected result.

[James Burke]

Created attachment 178255 [details]
Image showing expected rendering of the test page

[Alexander Shalamov]

(In reply to comment #0)
> Created an attachment (id=178253) [details]
> test page showing the issue
> 
> While -webkit-calc() works for a property like width, this done not seem to work:
> 
> .card.second {
>     transform: translateX(-webkit-calc(100% - 4.3em));
>     transform: translateX(calc(100% - 4.3em));
> }
> 
> That for is allowed in Firefox 18.
> 
> Attaching a test page and a screenshot with the expected result.

I think transformations are prefixed at the moment. With -webkit-transform CSS property name, I get same result as in the attached image.

[James Burke]

Sorry for wasting your time, prefixing was the problem.