Cssnano: Keep percent sign on zero values in transform-origin

[oliverschwarzpdm]

I came across an issue that the percent sign on zero percent values are removed in order to minify the css.

Sass: transform-origin: 0% 0%
after cssnano: transform-origin: 0 0

This resulted for me in a problem when using 'transform-origin' on an element in the recent Google Chrome browser (version 51.0.2704.106 m, up to 54.0.2787.0 canary). Probably the Chrome distinguishes between the number 0 and 0 percent. However, I wasn't able to fix this by passing an option to cssnano. Neither 'reducePositions' nor 'reduceTransforms', both set to false, worked out.

After some time of try and error I have came around with this workaround to keep the percent sign:
transform-origin: calc(0%) calc(0%)

It would be nice to have a passable option which handles this.

[ben-eb]

Do you have something that can reproduce this breakage? Is it related to this issue? https://github.com/ben-eb/postcss-reduce-transforms/issues/2

[oliverschwarzpdm]

It is somehow related to that issue but with 'transform-origin'.

I have set up a jsFiddle to show this behaviour (only working in Chrome): https://jsfiddle.net/oliverschwarzpdm/8s5h4ppb/2/
The first line is behaving as supposed with transform-origin: 0% 0% and the other one is behaving oddly with transform-origin: 0 0. Both lines should have that one origin point and only scale.

[marcobiedermann]

@oliverschwarzpdm This is not a bug in cssnano, this is a bug in browsers. Using transform-origin on a SVG element with percentage value will break in some browsers.
See: https://css-tricks.com/svg-animation-on-css-transforms/#article-header-id-0
You should use a JavaScript library like GreenSock.

[oliverschwarzpdm]

@marcobiedermann I agree with you that is a bug in browsers. It would be nice then that cssnano won't strip off the percent sign on these values, don't you think?

[marcobiedermann]

@oliverschwarzpdm

I agree with you that is a bug in browsers.

In my opinion I would not add an option to cssnano for this special case (bug).
Browsers which do work correctly should benefit from this compressor / minifyer, instead of supporting broken features.

[ben-eb]

@marcobiedermann Thanks for your response! I would agree that it is not our responsibility to mitigate cross-browser issues, which sometimes can be a nice side-effect of minification but it is not my goal with this module.

Because the behaviour is different for each browser—Firefox can't handle percentage values, Chrome can't handle unit-less zero values, IE doesn't render the animation at all—there is no sense in providing this support here.

I would also recommend using something like GreenSock in order to give your users a consistent cross-browser experience. 😄

[dtr0yan]

For those who want to fix this problem I can propose next:
use this package https://www.npmjs.com/package/patch-package to apply patch to cssnano.
Patch can be something like next https://gist.github.com/dtr0yan/82155c05cd8d7ab991558f939e207991

I know that this is not an elegant solution. But as for me it help to fix issue with my site for many users with old versions of browsers. Never give up!