CSS minifier transforms translate3d(0,0,0) to translate(0), breaking layouts in Safari

[stephband]

ESBuild's CSS minifier transforms translate3d(0,0,0) to translate(0). Unfortunately in Safari translate3d(0,0,0) is a useful hack, forcing it to respect z-index layering correctly, where translate(0) does not have the same effect.

[stephband]

Looking at the code I notice the minifier is doing a whole bunch of things to 3d transforms. The problem with this is as CSS authors we use 3d transforms to deliberately trigger hardware acceleration, as well as to solve rendering problems in Safari. I would really rather ESBuild was not messing with these, as the transformed result is not as intended by the author:

esbuild/internal/css_parser/css_decls_transform.go

Lines 252 to 278 in 80c92d4

	case "translate3d":
	// specifies a 3D translation by the vector [tx,ty,tz], with tx,
	// ty and tz being the first, second and third translation-value
	// parameters respectively.
	if n == 5 {
	tx, ty, tz := &args[0], &args[2], &args[4]
	tx.TurnLengthOrPercentageIntoNumberIfZero()
	ty.TurnLengthOrPercentageIntoNumberIfZero()
	tz.TurnLengthIntoNumberIfZero()
	if ty.IsZero() && tz.IsZero() {
	// "translate3d(tx, 0, 0)" => "translate(tx)"
	token.Text = "translate"
	*token.Children = args[:1]
	} else if tx.IsZero() && tz.IsZero() {
	// "translate3d(0, ty, 0)" => "translateY(ty)"
	token.Text = "translateY"
	*token.Children = args[2:3]
	} else if tx.IsZero() && ty.IsZero() {
	// "translate3d(0, 0, tz)" => "translateZ(tz)"
	token.Text = "translateZ"
	*token.Children = args[4:]
	} else if tz.IsZero() {
	// "translate3d(tx, ty, 0)" => "translate(tx, ty)"
	token.Text = "translate"
	*token.Children = args[:3]
	}
	}

esbuild/internal/css_parser/css_parser_test.go

Lines 1585 to 1595 in 2734bbf

	expectPrintedMangle(t, "a { transform: translate3d(0, 0, 0) }", "a {\n transform: translate(0);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(0%, 0%, 0) }", "a {\n transform: translate(0);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(0px, 0px, 0px) }", "a {\n transform: translate(0);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(1px, 0px, 0px) }", "a {\n transform: translate(1px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(0px, 1px, 0px) }", "a {\n transform: translateY(1px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(0px, 0px, 1px) }", "a {\n transform: translateZ(1px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(1px, 2px, 3px) }", "a {\n transform: translate3d(1px, 2px, 3px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(1px, 0, 3px) }", "a {\n transform: translate3d(1px, 0, 3px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(0, 2px, 3px) }", "a {\n transform: translate3d(0, 2px, 3px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(1px, 2px, 0px) }", "a {\n transform: translate(1px, 2px);\n}\n")
	expectPrintedMangle(t, "a { transform: translate3d(40%, 60%, 0px) }", "a {\n transform: translate(40%, 60%);\n}\n")

[evanw]

Please provide a small test case that demonstrates a rendering difference.

[yisibl]

Indeed, this conversion is not safe.
For related background take a look at: https://developpaper.com/what-you-need-to-know-about-the-css-will-change-property/

[evanw]

I still need a small test case that demonstrates a rendering difference. A test is necessary to determine which transforms are safe. I have attempted to read browser source code for this but I still can't verify things without a test case. Here's what I found for WebKit:

• https://github.com/WebKit/WebKit/blob/7f1c2ffe6a36cedde507edc54311e7a8fcde50d9/Source/WebCore/platform/graphics/transforms/TransformOperation.h#L82-L94

• https://github.com/WebKit/WebKit/blob/9186f04a555f27e03d302d9f5bef253b8fbaaf02/Source/WebCore/rendering/RenderLayerCompositor.cpp#L3002-L3008

[stephband]

Here is a test case:

https://stephen.band/test/css-transform.html

And here is a screenshot of that page, scrolled to half-way down in Safari:

The orange and yellow blocks both have 100% height, relative position, and a greater z-index than the red block, which has 50% height and is stuck to the bottom. Here we see the red block over the top of the yellow. This never happens to the orange block. The yellow block has transform: translate(0) while the orange block has transform: translate3d(0, 0, 0).

This can be observed in Safari desktop and Safari iOS. Note that the effect is sometimes intermittent - Safari does seem to update itself sometimes and render correctly after a moment.

[evanw]

Thanks for the test case. I was able to reproduce the bug. I verified that the following transforms trigger the bug in Safari:

• matrix3d
• perspective
• rotate3d
• rotateX
• rotateY
• scale3d
• scaleZ
• translate3d
• translateZ

and the following transforms do not:

• matrix
• rotate
• rotateZ
• scale
• scaleX
• scaleY
• skew
• skewX
• skewY
• translate
• translateX
• translateY

[Primajin]

I think this is good (that we no longer transform 3D into 2D) as one can use a 3D transform (often with 0,0,0) to just force the rendering being made by the GPU.

[stephband]

@evanw Hi. I have now been able to deploy these changes to production and can confirm it fixes all our woes. Thank you very much for your help, and for ESBuild, which rocks.