translate3d after parcel build will change to translate2d

[DodoMonster]

As the title says

when I use parcel build ，code will be compressed and optimize

But something strange and unexpected happened

For example , the css code

transform: translate3d(0, 0, 0) will be optimize and change to transform: translate(0, 0)

I think this operation goes against our original intention

can I know why and Is there a better way to do this than setting up --no-optimize

[devongovett]

How does this cause an issue for you?

[mischnic]

Maybe to force a new compositor layer? That probably doesn't happen with translate(0, 0) https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

[stevenpetryk]

MDN mentions that a new stacking context is created whenever one or more of these properties has a value other than none:

• transform
• filter
• backdrop-filter
• perspective
• clip-path
• mask / mask-image / mask-border

Source

So transform: translate(0,0) should suffice to create a new stacking context. Not sure if browsers follow this rule in practice, or whether Devon wants Lightning CSS's minifier to follow the spec (more correct) vs anticipating browser behavior (more practical).

[yisibl]

There is a lot of code like translate3d(0, 0, 0) in animate.css, please keep them. 2d and 3d are completely different.

• https://github.com/animate-css/animate.css/blob/3235f27325ebc721fc4f8435d3c2d436642278bc/animate.css#L121-L122
• https://github.com/animate-css/animate.css/blob/3235f27325ebc721fc4f8435d3c2d436642278bc/animate.css#L143-L144

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

[devongovett]

I noticed that cssnano also does this by default: https://www.npmjs.com/package/postcss-reduce-transforms. These days, there are other ways of forcing a compositor layer, e.g. will-change: transform or backface-visibility.

2d and 3d are completely different.

in what way? are there other observable side effects to converting them?

[d4tocchini]

This is a bug. Safari is notorious for relying on translate3d to trigger gpu layers for things mix-blend-mode. backface-visibility does not do the job. Sure, there may be other ways to force a gpu layer like will-change, but that semantic hack comes with more side effects.