cssanimationwebkit-transformwebkit-animation

-webkit-transform unsupported property

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."

enter image description here

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?

Solution

  • I upgraded to 15.5 and it solved the problem.