Transform treated as attribute instead of style property in Safari (V2)

[Je1te]

Your system information

• VelocityJS version: 2.0
• Browser: Safari
• Operating System: MacOS

Checklist

• Is this an issue with code?: No
• Is this an issue with documentation?: No
• Have you reproduced this in other browsers?: No
• Have you checked for updates?: Yes
• Have you checked for similar open issues?: Yes

Please describe your issue in as much detail as possible:

For V2, in Safari when applying a transform animation to a regular DIV element, this is treated as an HTML attribute instead of CSS style property. Therefore the animation is not working.

In Chrome and Firefox it correctly changes the CSS style property. I did not test IE/Edge.

JSFiddle example showing issue in action (code):

https://jsfiddle.net/z6842sgp/2/

[Rycochet]

That example doesn't seem to have any code in it, simply a clone of the root example - can you update the link for me to test it :-)

[Je1te]

Apologies, updated.

[Rycochet]

Thanks - not going to be able to look at this immediately, but hopefully I can get some time before the end of the month :-)

[schester44]

seeing this issue as well

example of what i'm running

	document.querySelector(".events").velocity(
				{
					transform: [
						() => `translateX(0)`,
						() => `translateX(-640px)`
					]
				},
				{ duration: 1000, easing: "ease-out", delay: 2000 }
			)

[schester44]

@Rycochet I'd like to poke at this. any recommendations for where I should start looking?

[Rycochet]

@schester44 There's no special handling for it - it's purely treated like any other string property, so really not sure there. There was a previous problem where a non-unit property was being transformed into a unit property, but that should be fixed - the code that translates it into a valid token list for tweening is here - https://github.com/julianshapiro/velocity/blob/master/src/Velocity/tweens.ts - but it's now been a year since I had enough time to do anything in here and my memory of what's going on is a little lazy (I really hope it's understandable enough) ;-)