In Chrome 'transform-origin' is invalid?

Question

My Chrome console returns Invalid CSS property name to a transform-origin CCS attribute as the site loads even though it works and I have a -webkit- prefixed version.

The target CSS looks like this:

-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;

Is it really an issue?

Answer 1

I've found the origin of my issue.

The problem is that -webkit- browsers don't accept the transform-origin attribute when it is isolated from a supporting attribute (an attribute that actually uses the transform-origin).

So, for example, if I use something like this, -webkit- assumes it is wrong:

#divOne{
   transform-origin:50% 50%;
   animation:jump 1s ease both;
}
@keyframe jump{
   from { transform: translateX(-20%) rotateY(-90deg); }
   to{ transform: translateX(0%) rotateY(0deg); }
}

It is wrong because the origin attribute is detached from the transform that is going to take use of it. Even though it works, it is not entirely correct on the browser's perspective.

It should be something like this to be correct:

#divOne{
   animation:jump 1s ease both;
}
@keyframe jump{
   from { transform: translateX(-20%) rotateY(-90deg); transform-origin:50% 50%; }
   to{ transform: translateX(0%) rotateY(0deg); transform-origin:50% 50%; }
}

Where both transforms are together on the same element.

Answer 2

The answer to your question in simple terms is 'NO'. It is a perfectly valid property. There must be something else that's causing the error.

Read this:

https://docs.google.com/document/d/1UsKm0ywILw9cuTRYlkhqMYTdzNcih6sO15u1eCzGgP8/edit?pli=1#

and this

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility