Can't use transform: scale() in Angular animation without Experimental Web Platform features enabled - how to fix this for hosted site

Question

This issue is only on Chromium browsers. Whenever I use a style with transform: scale() in an Angular or a css keyframes animation and I do not have the Chrome flag "Experimental Web Platform features" enabled I get this error:

"The animation trigger "rotateText" has failed to build due to the following errors:

• The provided animation property "scale" is not a supported CSS property for animations."

I know that there is a way to enable this on a site so that users do not need the flag on their machine, and I think it has something to do with Chrome origin trials. Any help would be appreciated!

Edit #1

Here is the relevant code:

Angular TypeScript animation

trigger('rotateText', [
  state('hover', style({
    transform: `translateY(-{{tYB}}%) scale({{scaleB}})`,
    opacity: 1,
    ['box-shadow']: '0px 10px 15px rgba(0,0,0,0.1)',
    filter: 'blur(0px)',
    ['z-index']: '{{zB}}'
  }), {params: {tYB: 0, scaleB: 1, fB: 0, zB: 8}}) ])

CSS

@keyframes throb {
  100% {
      scale: 1.1;
  }
}

Here is the flag:

Edit #2

After doing more research I have realized there are two separate problems.

• I haven't been able to figure out how to use -webkit-transform: scale() in my angular animation.
• The Chrome feature "Independent Properties for CSS Transforms" is still in development. https://chromestatus.com/feature/5705698193178624

Edit #3

I have solved the first problem by doing: ['-webkit-transform']: 'translateY(-{{tYB}}%) scale({{scaleB}})'

Answer 1

How are you using scale()? Please post relevant code. Some have reported that scale might need 2 params.

transform: scale(2, 0.5);

Your syntax is a bit off. The animation params go into template for input binding {params: {tYB: 0, scaleB: 1, fB: 0, zB: 8} which will be read by trigger rotateText and applied to the antimation. See this for correct synatx: stackoverflow.com/a/47125545/15439733