transform-origin: 0 incorrectly becomes transform-origin: 0 0

I saw an issue where we had a CSS rule similar to this:

div {
  transform-origin: 0;
  -ms-transform-origin: 0;
}

And it was getting rewritten to this (I added the spacing back in):

div {
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
}

Which actually has a different meaning. The single-value version changes only the X offset of the origin, the two-value version changes the X and Y offsets. Thus, once our CSS was minimized, it did something different than what it did before it was minimized. Not to mention that the CSS actually became more verbose after going through minification :stuck_out_tongue: More information on transform origin here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

I tested this in both version 2.4.7 and 2.4.8, and they both did the same thing.

For anyone else with this problem, the workaround is to specify the default value for Y, which will be either this:

div {
  transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
}

Or this: (depending on your preference)

div {
  transform-origin: left center;
  -ms-transform-origin: left center;
}

My guess is that this line is the issue: https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java#L332 But I don't know enough about the code to be sure.

Let me know if you need any more information, I'd be happy to oblige :smile:

yui / yuicompressor

transform-origin: 0 incorrectly becomes transform-origin: 0 0 #172