-webkit-transform unsupported property

Question

I am trying to apply a transform (scale + translation) to a div in css:

.my-div {
  -ms-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
  -webkit-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
  -moz-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
  -o-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
  transform: scale(40%) translateX(-20%) translateY(-20%);
}

Although this works in chrome, it doesn't work in safari. Inspecting the element, you see that -webkit-transform and transform should apply, but I see warnings. The warning says "Unsupported property value."

I've tried percentages & decimals, scale with one & two values, translate split into X and Y or combined into a single translate. Nothing works. The documentation states that this should work.

Any ideas?

we no more need prefixes for transform since decades, you can remove them and keep only `transform` — Temani Afif, Jul 25 '22 at 20:22
I tried removing those prefixes and only keeping the transform, but it still doesn't work in safari — Josh Gafni, Jul 25 '22 at 20:25
use 0.45 instead of 45%. Maybe safari have issues with percentage — Temani Afif, Jul 25 '22 at 20:26
Have you tried splitting them out individually like so? https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/ — AStombaugh, Jul 25 '22 at 20:27
tried both of these - doesn't work. i still see unsupported property. — Josh Gafni, Jul 25 '22 at 20:38

score 0 · Answer 1 · answered Jul 25 '22 at 22:42

0

Upgrading from Safari 15.1 to 15.5 solved the problem. Thanks everyone!

answered Jul 25 '22 at 22:42

Josh Gafni

2,831
2
19
32

score 0 · Accepted Answer · answered Nov 18 '22 at 19:17

0

I upgraded to 15.5 and it solved the problem.

answered Nov 18 '22 at 19:17

Josh Gafni

2,831
2
19
32

score -1 · Answer 3 · answered Jul 25 '22 at 20:31

-1

just use this one:

.my-div {
  transform: scale(40%) translateX(-20%) translateY(-20%);
}

it must be work

answered Jul 25 '22 at 20:31

erfan ns

87
2

Doesn't work. i still see unsupported property. – Josh Gafni Jul 25 '22 at 20:38
1

what's the version of your browser? – erfan ns Jul 25 '22 at 20:44
Safari Version 15.1 – Josh Gafni Jul 25 '22 at 20:46
1

I upgraded to 15.5 and it solved the problem. Thank you! – Josh Gafni Jul 25 '22 at 22:41

-webkit-transform unsupported property

3 Answers3