Adobe Community: Message List - BUG: transform-origin not properly being set for Chrome v36

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

forums_noreply@adobe.com — Wed, 15 Oct 2014 18:22:18 GMT

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.

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

forums_noreply@adobe.com — Tue, 05 Aug 2014 09:32:32 GMT

Awesome!! Very happy to know that Peter.

Regards,

Sudeshna

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

forums_noreply@adobe.com — Tue, 05 Aug 2014 09:08:41 GMT

Thank you Sudeshna and the Edge Dev Team

All animations have been re-published and are now working

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

forums_noreply@adobe.com — Mon, 04 Aug 2014 17:33:28 GMT

Thanks for the update Sudeshna!

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

forums_noreply@adobe.com — Mon, 04 Aug 2014 16:16:46 GMT

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

Regards,

Sudeshna

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

forums_noreply@adobe.com — Mon, 04 Aug 2014 16:13:32 GMT

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.

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

forums_noreply@adobe.com — Mon, 04 Aug 2014 16:01:20 GMT

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

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

forums_noreply@adobe.com — Sun, 27 Jul 2014 11:32:46 GMT

Thank you! I found the solution!

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

forums_noreply@adobe.com — Fri, 25 Jul 2014 21:02:00 GMT

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.

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

forums_noreply@adobe.com — Thu, 24 Jul 2014 08:27:13 GMT

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.

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

forums_noreply@adobe.com — Wed, 23 Jul 2014 17:00:05 GMT

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

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

forums_noreply@adobe.com — Wed, 23 Jul 2014 16:43:56 GMT

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

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

forums_noreply@adobe.com — Wed, 23 Jul 2014 12:45:07 GMT

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.

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 16:46:08 GMT

Thanks for the response and more detailed response Sarah. Will keep my ears open for the solution.

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 16:18:31 GMT

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

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 14:44:38 GMT

Preran,

Thank you for getting this bug submitted into the product team, but I do share in the frustration of the other users here. This isn't a matter of "feature justification", this is broken. Plain and simple. It is also broken in the world's most widely used browser that auto updates, making this issue all the worse as each browser updates to v36.

59.3% failure in the market isn't acceptable, and certainly isn't a feature.

Browser Statistics

A timely fix is in the best interest of everyone here. Most importantly, the longevity of Edge Animate as a reliable platform for the growth of the animated web. If Adobe cannot respond to a shift in web standards quickly, it doesn't bode well for their ability to handle other future change as well. The web is a constantly shifting place, timelines and ETAs help the rest of us to justify continued usage of a currently questionable platform.

Thanks for what information you can (or are allowed to) provide.

Dave

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 13:51:13 GMT

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.

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 13:46:43 GMT

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

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 13:38:56 GMT

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.

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 13:34:33 GMT

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

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 13:33:07 GMT

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

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 13:10:48 GMT

Hi all,

I am checking with the product team. Stay tuned.

Thanks,

Preran

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 11:44:50 GMT

Yea, my projects are far too complex to readjust every origin point before saving. Good solution for the short term and simple, but we still need that fix from Adobe for a lasting solution.

But thanks for chiming in Yavor! Hopefully we'll see some response from Sarah Hunt or another rep today on this.

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

forums_noreply@adobe.com — Tue, 22 Jul 2014 08:40:46 GMT

Unfortunately this work around doesn't work for me

Pete

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

forums_noreply@adobe.com — Mon, 21 Jul 2014 20:27:14 GMT

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

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

forums_noreply@adobe.com — Mon, 21 Jul 2014 14:39:13 GMT

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!

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

forums_noreply@adobe.com — Mon, 21 Jul 2014 14:29:01 GMT

Moving this conversation from the previous thread to a new discussion that is a little more accurate. (last one was off in regards to responsive scaling, issue is little wider than that)

old thread: Transform Origin is forced to 0,0 when using 'Responsive Scaling' in mobile Safari and Chrome

So here is the problem. Chrome (as of version 36) now recognizes the transform-origin value as the preferred method for the browser, rather than the more specific -webkit definition. Here is an image that may help to illustrate this a bit more in context.

As you can clearly see in the image above, Chrome no longer opts to use the -webkit transform values and has adopted the newer method (and hopefully a cross browser standard in the near future) of transform-origin. What we are missing here is this value being set by Edge Animate. If we can get these values set in both fields, it should resolve the issue across the board.

Our engineering staff has done a lot of digging on this as well, and Google is point back towards Adobe for this fix. The values simply need to be set by Edge Animate. Here is a link to 2 Google Chrome related threads with this issue as well.

Issue 382905 - chromium - 'transform' property with '-webkit-' vendor prefix is ignored in latest build - An open-so…

and

Issue 394723 - chromium - Wrong CSS Transforms in Adobe Edge Animations - An open-source project to help move the we…

I cannot stress how much of MAJOR BUG this is for heavy Edge Animate users like my company. All of our character animations are literally falling apart and since Chrome is a browser that will auto update, this will only become more widespread of an issue as time goes on.

Please respond back to this thread with an ETA on an update for Edge Animate to resolve this issue. Thanks!