Log in Try the demo

Loading…

Dataset 20261011-0550-f160c57 · measured 2026-10-11 05:50 UTC

translate

◐matches Chrome on some values8 of 11 examples match Chromecss-transforms-2

Some of the examples match Chrome and some do not. The count beside the verdict says how many — 11 of 12 — and the values that differ are listed on the property page. It is neither a pass nor a failure, and filing it under either would be a lie in one direction.

Here: 8 of 11 examples match Chrome. The 3 that do not: translate:20px calc(40% + 20px), translate:calc(40% + 20px), translate:20px 20px calc(20px + 4px) — shown first below, each with its difference map.

What the specification says

Initial value: none
Applies to: transformable elements
Inherited: no
Percentages: relative to the width of the reference box (for the first value) or the height (for the second value)
Computed value: the keyword none or a pair of computed <length-percentage> values and an absolute length
Syntax: none | <length-percentage> [ <length-percentage> <length>? ]?

css-transforms-2 definition

The measurements

11 examples, 8 of them matching Chrome, the rest first. Each is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.

translate:20px calc(40% + 20px)✕parsed, no effect

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

29,280 pixels differ from Chrome, the largest by 204 of 255 on one channel.

Differing pixels: 29,280
Max channel delta: 204

the example page

translate:calc(40% + 20px)✕parsed, no effect

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

24,000 pixels differ from Chrome, the largest by 204 of 255 on one channel.

Differing pixels: 24,000
Max channel delta: 204

the example page

translate:20px 20px calc(20px + 4px)✕parsed, no effect

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

12,000 pixels differ from Chrome, the largest by 204 of 255 on one channel.

Differing pixels: 12,000
Max channel delta: 204

the example page

translate:20px 50%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:50%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:20px 20px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:20px 20px 20px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:20px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:20px 40%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:40%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

translate:20px 20px 4px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

Which values were measured

“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 6 branches; 5 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.

Value	Measured
20px	✓pixel-exact
50%	✕parsed, no effect
20px 20px	✓pixel-exact
20px 50%	✕parsed, no effect
20px 20px 20px	✕parsed, no effect
none	not measured

Tests in the suite that name this property

Secondary evidence: 5 Web Platform Tests carry a spec anchor pointing at this property. Only 1,254 tests in the whole corpus carry such an anchor, so an empty list here means nothing at all.

✓css/css-transforms/individual-transform/translate-fill-box.html ✓css/css-transforms/individual-transform/translate-view-box.html ✓css/css-transforms/translate/translate-and-transform-attribute-in-svg.html ✓css/css-transforms/translate/translate-and-transform-css-property-in-svg.html ✓css/css-transforms/translate/translate-in-svg.html

Measured against Chrome 148.0.7778.96 on 2026-10-11, with up to 40 candidate values tried per property. All properties · How the measurement works