BUG: transform-origin not properly being set for Chrome v36

I concur with DavePowellGPA, this is a MAJOR BUG as it is impacting work we have done for clients, and we need this fixing ASAP Adobe!

I can also confirm the issue. Also, I found a workaround which might temporary help. I looks like the issue only occurs after the Animate file has been saved and reopened. Also, a change in the value resets the item. Here the details:

Steps to recreate the issue

• Crate a new animation
• Draw a rectangle, apply a transformation and change the transformation origin. Add two reference items at the ends of the rectangle for comparisson.
• Save the animation, but don't close it. Preview the animation in Chrome. Make sure Chrome is updated to the latest version. The transition should display properly.
• Close the file in animate and reopen it. Preview the animation again. You will notice that the rectangle has shifter (transformation origin value is ignored)

Workaround (quite time-consuming for large animations)

• Open the damaged animation
• Select transformed elements one by one and change their transformaiton origin to a new value. Than change back to the original value.
• Export or preview the document without closing it before that. It should work fine (the exported file is also OK)

Adobe: please react ASAP, keeping Edge Animate open so we will not have to reapply all transformation each time we open the file is not acceptable

Yavor

Unfortunately this work around doesn't work for me

Pete

Hi all,

I am checking with the product team. Stay tuned.

Thanks,

Preran

Hi all,

We have logged a bug for this issue and will be fixing it in a future update. Thanks for letting us know of the issue.

Thanks,

Preran

any ideas on how far into the future we are talking...days, weeks, months?!!!

Preran,

thanks for the information. I just want to emphasize, that a bug which makes code, made for a browser not work in the most popular browser should be handled as high-priority. In other words, until the bug is taken care of Edge Animate is unusable.

We need a firm commitment and an ETA on the delivery of the update.

Hi redberry-peter,

Announcements on release dates can be made only by the product management team.  Rest assured that when a product team has an update it tries to factor in all concerns while ensuring that there are enough quality features to justify the update.

Thanks,

Preran

Well, Preran, what I am trying to say is that if Adobe waits for having "enough quality features to justify the update" before releasing a fix for this you will see a lot of new HYPE and Google Designer users in the very near future. In fact, I encourage everyone reading this thread to contact support per chat and telephone should this not be fixed by Friday.

Did someone call me?

Thanks for the detailed information in your post Dave. We began looking into this a few days ago and you're right, the fix needs to come from our end to ensure Chrome stops trying to sniff out the -webkit prefix for transform-origin as this was recently deprecated in Blink.

Be assured that as Preran mentioned, this is a top priority for us right now. We can't publicly commit to a date because we just discovered this issue around the same time you guys did with the release of Canary 36 and legitimately don't have a firm date other than "soon". There's lots of shifting sands which goes into releasing an update, which include the fix itself, getting release builds ready, staging to ensure you can actually download it and deployment (plus all the little stuff in between). This isn't an excuse, totally understand you need this fixed now, just giving some insight that updates aren't magic (believe me, my life would be a lot easier if they were).

Sorry for the frustration, I understand how irritating these issues can be especially with deliverables due. Joys of working with the web. We'll keep you posted once we have a target date in mind (which will be soon) or if we come up with a short-term solution before a fix is available.

Thanks,
Sarah

I have found a placeholder fix that has worked on my animation:

TAKE A BACKUP

Open the <file name>_edge.js file

find all instances of "-o-transform-origin"

you'll find some lines that look like this:

["style", "-o-transform-origin", [12,95],{valueTemplate:'@@0@@% @@1@@%'}],

for each line like this, copy and paste it again below but remove "-o-" so youll now have

["style", "-o-transform-origin", [12,95],{valueTemplate:'@@0@@% @@1@@%'}],

["style", "transform-origin", [12,95],{valueTemplate:'@@0@@% @@1@@%'}],

further down you'll find lines like this:

{ id: "eid363", tween: [ "style", "${_sl15gasCopy2}", "-o-transform-origin", [12,95], { valueTemplate: '@@0@@% @@1@@%', fromValue: [12,95]}], position: 12000, duration: 0 },

Again, copy and paste each of these, removing the "-o-" from "-o-transform-origin" and then add something to the id (id: "eid363") I have added a "b" to the end.

{ id: "eid363", tween: [ "style", "${_sl15gasCopy2}", "-o-transform-origin", [12,95], { valueTemplate: '@@0@@% @@1@@%', fromValue: [12,95]}], position: 12000, duration: 0 },

{ id: "eid363b", tween: [ "style", "${_sl15gasCopy2}", "transform-origin", [12,95], { valueTemplate: '@@0@@% @@1@@%', fromValue: [12,95]}], position: 12000, duration: 0 },

Take care with the commas and square brakets in this code.

This worked for me but I'm unsure how it will work for more complex animations with nested clips and such.

Hi guys,

I'm another frustrated on this.

My animation is not working properly in Google Chrome.

I did ppprd recommendations but still doesn't work.

I'll stay tuned on this forum ... Thanks ppprd!

Eva

We've implemented a temporary work-around that's relatively simple and involves only the edge.3.0.0.js (or edge.4.0.0.js) which is in the edge_includes directory.

You can download the unminified version of either file on Adobe's site.

The workaround involves first detecting whether the browser is chrome36, something like:

var chrome36 = navigator.userAgent.search("Chrome/36") > -1;

and then finding the function named 'doCreateElement'

Inside that function (around line 9555) is a routine that starts with:

if(oN.tf) {

it's got 2 for loops, an outer and an inner.

In the inner there's a single condition:

if(!oN.tf[iM][iV]) oN.tf[iM][iV] = aMap[iM][1];

Wrap this condition in a condition checking for chrome 36 like so:

if(chrome36){

    if(typeof oN.tf[iM][iV] !== "undefined") oN.tf[iM][iV] = aMap[iM][1];

}else{

   if(!oN.tf[iM][iV]) oN.tf[iM][iV] = aMap[iM][1];

}

You can then save your file and run it through a closure compiler to minify it.

This works on Chrome36 and earlier as well as on Firefox 30 (which also uses transform-origin without a prefix, but apparently implements it differently than Chrome).

Definitely a hacky, programming-by-side-effect sort of solution; but it's a much quicker fix that going into the Edge GUI and changing each element by hand...

That's fantastic atothemfz,

A lot less faffy so it can be rolled out into multiple animations really easily.

EDIT:

My colleagues seem to be having trouble when running the files I have edited. Console throws up a bunch of errors and they just get the loading screen. Really odd, has any one else experienced this?

EDIT 2:

Turns out my new min file was encrypted because I saved it in the unzipped zip file so my colleagues couldn't access the file. Redid it in notepad elsewhere and it was sorted.

Unfortunately, atothemfz's has some caveats.

When you preview from Edge, it will pull edge.3.0.0.min.js (or 4.0.0 or whatever) from Adobe's CDN. You can't, as far as I can tell, do anything about that, so you have to Preview in another browser.

The published version will also pull from the CDN, unless you turn off this option in your publish settings. Then, when you publish, it will still pull the version from the CDN and put it in your publish directory. You can now replace this version with the one you built using atothemfz's technique.

Man, this sucks.

Thank you! I found the solution!

Hi All ,

We have addressed the vendor prefix problem on Chrome v36. The new Edge Animate CC 2014 updater(2014.0.1) is now available on Creative Cloud. Please install the build and do let us know if your animations are now working as expected on Chrome.

Please refer to the What's new @Edge Animate Help | New features summary for more details.

Thanks and Regards,

Sudeshna Sarkar

Will this fix not be made available for Edge CC 3.x? We haven't upgraded to Edge CC 2014 yet as our leads have not had a chance to evaluate it.

Yes , you can directly upgrade to Edge Animate CC 2014.0.1 from Edge Animate CC(i.e EA3)

Regards,

Sudeshna

Thank you Sudeshna and the Edge Dev Team

All animations have been re-published and are now working

Awesome!! Very happy to know that Peter.

Regards,

Sudeshna

BE WARNED::

AS OF THE TIME OF MY REPLY TO THIS "CORRECT" ANSWER DO KNOW THAT YOU MAY BE SACRIFICING ONE FEATURE FOR ANOTHER IF YOU UPDATE TO CC 2014!!

SEE THESE THREADS IF YOUR ANIMATIONS ARE PLACED IN A MUSE PROJECT THAT USES MUSE SCROLL MOTION ABILITY TO SCRUB THE EDGE ANIMATION. IT DON'T WORKY

https://forums.adobe.com/thread/1598558

http://https://forums.adobe.com/message/6816974#6816974

BUGS. BUGS. BUGGY. AND WHEN I ASKED TECH SUPPORT FOR ASSISTANCE, THEY TOLD ME TO DOWNLOAD EARLIER VERSION OF EDGE ANIMATE AND START OVER. THAT IS NOT SUPPORT. THAT'S ABUSE.

AT THE MOMENT, I'M SCARED TO USE THESE PRODUCTS FOR ANYTHING CLIENT RELATED.

P.S.  I FOUND THIS THREAD ABOUT ORIGIN TRANSFORM AFTER I GOT GOING ON INSTALLING THE EARLIER VERSION OF EDGE, STARTING OVER FROM SCRATCH AND ATTTTTEMPTINGGG TO APPLY A TRANSFORM ORIGIN TO AN OBJECT. SAD. MINIMUM VIABLE PRODUCT HAS NOT BEEN ACHIEVED. THE 2014 LINE IS STILL IN BETA IF YOU ASK ME. HOURS WASTED.