18 Replies Latest reply on Sep 9, 2013 10:45 AM by elainecc

    Edge Animate and Safari problem??

    jhtmk1

      Can anyone PLEASE HELP ME!!! I can’t seem to find any other discussions or content that addresses this problem:

      I recently published my An file for a webpage it displays perfectly in IE9 and the latest Chrome but looks absolutely horrific in Safari. Where it is rendered beautifully smooth in the other browsers it plays back jittery as if it’s skipping a number of frames.

       

      Hopefully You can see what I mean at http://www.nathanmcmahon.com.au (it may not look that bad but it gets much worse) this is only the first half of the homepage (I slashed it in half to check if it had something to do with length and size etc.) other larger/more intricate pages (which still display perfect in IE and chrome) look even more jittery to the point where you can’t even see any of the “easing” I applied especially when different symbols are playing at the same time because it is so jumpy.

       

      I don’t know a lot about An…I’ve been clutching at straws: changing file size, changing image formats from jpg to png and adjusting sizes so that they are small and so no re-sizing occurs in edge but it makes no difference at all. Doesn’t matter how big or small it just will not play smooth in safari for me.

      It gets even worse on an ipad2 it creates an invisible line through everything above the line moves out of sync with everything below it chopping images in half etc.

       

      What I can’t understand is I’ve found examples of An on the web and played it in each browser and they all seem to display pretty much the same yet NONE of my An files/html pages play nice previewed or published for Safari. What am I doing wrong??? How can I fix this??? 

       

       

      Any advice would be greatly appreciated…

        • 1. Re: Edge Animate and Safari problem??
          Jerry Witt Level 2

          I think I see what you are describing. When I view your link on Safari I see the large verticle sections have a stairstepped look to them.

           

          I suspect that the issue of video tearing has more to do with Safari than EA. See this discussion:

          http://forums.macrumors.com/showthread.php?t=1418622

           

          The only suggestion I would have is that if you slow down the moves a little bit, the video card may be able to keep up with the change in the frames.

          • 2. Re: Edge Animate and Safari problem??
            jhtmk1 Level 1

            Thank you so much for your reply and advice Jerry. Which Safari and device/operating system did this happen in for you?

             

            Because it seems to play ok (not perfect but certainly tolerable) for me on iphone4s which uses the same IOS6 but obviously it is different hardware, it makes me think maybe it’s a size thing, because it’s scaled right down on the phone which means it can handle it fine??

             

            Re. slowing down the animation it doesn't appear to solve the issue for me entirely but I will definitely look into it further. On another page I have objects that move slower horizontally across the screen, they play smooth in An itself and IE9 but it’s like it just jumps across in intervals in Safari on Windows 7. That animation has a lot more interactivity but still it’s not a very big file size. I think you’re right it definitely gets less perceptible the slower the movement is and the smaller the scale of the animation. 

             

            Does this mean my only solution if I want it to be viewed nicely in Safari is to only have very slow movements or scale everything down? Has anyone else experienced this and found a way to work around it?

             

            Other An examples I’ve seen on the web seem to behave pretty much the same in all browsers yet mine is noticeably different. 

            • 3. Re: Edge Animate and Safari problem??
              jhtmk1 Level 1

              Ok now I'm certain that even the slowest movement and even at a smaller scale, it does not play nice for me in Safari on windows. It slides out slowly and smoothly in IE9 and Chrome, while Safari it's still jittery. How has no one else come across this?? 

              • 4. Re: Edge Animate and Safari problem??
                Jerry Witt Level 2

                I think very few people are moving full-screen elements. For my part I have just been building banner and header-sized images.

                • 5. Re: Edge Animate and Safari problem??
                  joel_pau Level 5

                  Well, you can try this automatic function:

                   

                           /* RequestAnimFrame: a browser API for getting smooth animations. See links below. */

                           window.requestAnimFrame = (function(){

                             return  window.requestAnimationFrame     ||

                                    window.webkitRequestAnimationFrame ||

                                    window.mozRequestAnimationFrame    ||

                                    window.oRequestAnimationFrame      ||

                                    window.msRequestAnimationFrame     || 

                                    function( callback ){ window.setTimeout(callback, 1000 / 24); };

                           })();

                  3 links:

                  1) Google guys.

                  2) Adobe.

                  3) w3c.

                   

                  Why 24? cinema (movies) = 24 frames per second.

                  1000 = one second.

                  Safari = webkit browser.

                  • 6. Re: Edge Animate and Safari problem??
                    jhtmk1 Level 1

                    Hi Joel,

                     

                    Thank you for your insight, from what I’ve read (with limited understanding) it seems to be exactly what I am looking for the only problem is I’m not sure how to implement it even after reading the links. Could you please excuse my ignorance and if possible give more specific details on how I can get this to work? i.e. Where do I add it etc.? Thanks heaps for your time.

                    • 7. Re: Edge Animate and Safari problem??
                      joel_pau Level 5

                      Well, i do not see your file but you can use compositionReady panel to copy and paste this code.

                      You can also use creationComplete (stage symbol).

                       

                      More explanations:

                       

                      1) JavaScript.

                      and ==> &&

                      or ==> ||

                      setTimeout() ==> a pause function

                      Edge Animate use automatic functions. Click on full editor to see them.

                      Stage example:

                         //Edge symbol: 'stage'

                         (function(symbolName) {

                       

                       

                         })("stage");

                         //Edge symbol end:'stage'

                       

                       

                      2) Browsers.

                      webkitRequestAnimationFrame ==> Safari and Chrome.

                      mozRequestAnimationFrame ==> Firefox.

                      oRequestAnimationFrame ==> Opera.

                      msRequestAnimationFrame ==> Internet Explorer 10.


                      • 8. Re: Edge Animate and Safari problem??
                        jhtmk1 Level 1

                        Hi Joel,

                         

                        Thanks for your quick response and time. My initial thoughts were to use this in compositionReady or creationComplete but it didn’t seem to affect it at all. I can upload the files if you would like to have a go. But I am now considering accepting these limitations and using the adaptiveContainer from Edgecommons so that I can just display a completely different composition on the ipad where it displays the worst and is virtually unusable.

                         

                        I see that you have already helped someone trying to implement the adaptiveContainer in another discussion and you seem to really know your stuff, so I was wondering if you could give me any insight into this…

                         

                        I seem to be able to implement this function fine and it will work perfect for me in Chrome, Firefox, Safari including IOS, but will not work in IE9. The only thing that is displayed in IE9 is the adaptiveContainer “rectangle” itself whatever the window size. Even if I download Simons Widjaja’s sample files from: http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/flexible-layouts-using-adobe-e dge-animate-and-the-edge-commons-library/ his page will behave how it should in all the other browsers except for IE9 where it does exactly the same as mine. Is this just happening to me? I can’t seem to find any other information on it.

                         

                        Do you know of any issues with IE9 that would cause this not to work?

                         

                        Are there any workarounds? This would be a really good solution if I could actually get it to work in all browsers. 

                         

                        Thanks again for all your time, it really is appreciated.

                        • 9. Re: Edge Animate and Safari problem??
                          joel_pau Level 5

                          It also works using IE 9. I forgot it this morning.

                          You can send me your files by private message.

                          • 10. Re: Edge Animate and Safari problem??
                            jhtmk1 Level 1

                            Ok thanks I will send those files to you in a private message as soon as I can then.

                             

                            I thought it would be really strange if it didn't work in IE9 so that is a relief to hear. Do you have any ideas off the top of your head as to what I'm doing wrong then if it's working in everything except IE9? I even tried it on IE9 on a different PC and it showed the same fault.

                             

                            Thanks again, will send files ASAP.

                            • 11. Re: Edge Animate and Safari problem??
                              AmintaAdobe Level 1

                              Hi Joel, Hi Jerry, Hi Jht!

                               

                               

                              Me too I'm experiencing a severe issue with Safari mobile (iOS 6.01 and iBooks Author Widget).

                               

                              The problem is very simple: when I work without symbol, all it work flawlessy, but if I run the same animation as a symbol, the animation looks "horrific" in Safari Mobile.

                               

                              Here's the examples (see it from AN IPAD):

                               

                              1) Simple animation:  http://www.terredainventare.it/ios/notSymbol/Dante.html

                               

                              2) Animation that contain the previous animation as a a symbol: http://www.terredainventare.it/www.terredainventare.it/ios/symbol/DanteSimbolo.html (slow and corrupted).

                               

                              Here are the project files:  http://www.terredainventare.it/ios/SymbolNotSymbol.zip

                               

                              Is it a iOS 6 or an Edge Animate bug with webkit?

                               

                              MANY THANKS!

                               

                              Davide

                              • 12. Re: Edge Animate and Safari problem??
                                jhtmk1 Level 1
                                 

                                SCRIPT438: Object doesn't support property or method 'debug'

                                EdgeCommons-0.4.0.js, line 3 character 406

                                 

                                SCRIPT438: Object doesn't support property or method 'setAdaptiveLayouts'

                                AdaptiveLayout_edgeActions.js, line 22 character 12

                                 

                                These are the errors I'm getting if I F12 in IE 9?

                                 

                                • 13. Re: Edge Animate and Safari problem??
                                  jhtmk1 Level 1

                                  Update on the ipad and the "video tearing" I have managed to get another similar page to play nicely on the ipad. So I can confirm it has nothing to do with sizes and also speed etc. It could have something to do with playing symbols or symbol size though… I have to look further into the differences between the two files to see if I can spot a difference. This page still plays a little choppy in Safari but perfect in all other browsers.  

                                  • 14. Re: Edge Animate and Safari problem??
                                    AmintaAdobe Level 1

                                    Hi Jht, I think it have to do with the use of symbol, see my post....

                                     

                                    Davide

                                    • 15. Re: Edge Animate and Safari problem??
                                      iodex

                                      My animation is really choppy In Chrome and FIrefox looks ok. Safari and IE 9 looks super choppy. The symbol thing didnt work for me. I have no idea why this is happenining

                                      • 16. Re: Edge Animate and Safari problem??
                                        resdesign Adobe Community Professional & MVP

                                        Try to preload your assets.

                                        • 17. Re: Edge Animate and Safari problem??
                                          Joel Bondoux Level 1

                                          I have also noticed Safari having difficulty with running heafty animations.  www,joelbondoux.net has a significant number of elements with partial transparency moving in the background.  On mobiles it automatically loads a static background version www.mobile.joelbondoux.net .

                                           

                                          I may well have safari load the mobile version as it is so choppy.  Even Safari (this is Safari on Win8) has difficulty with the mobile version, the animated horizontal lines (again with partial transparency).  This is a shame as FF, Chrome, IE and Opera seem to play the main site fine (I must confess to have not tested the site on low end PC hardware).

                                           

                                          I wonder, is there a function to read the frames per second playback on the client machine (or maybe the Windows System Rating - is there an equivalent for Mac)?  One could then prompt the mobile or simpler version to load insead - or at least prompt the user to know about the alternative version and choose to browse to it..

                                          • 18. Re: Edge Animate and Safari problem??
                                            elainecc Adobe Employee

                                            Hey, Joel-

                                             

                                            One thing to note is that Apple has EOL'd Safari on Windows, so unless you're using some kind of VMWare with MacOS, you're using an older version of Safari.  Have you tried Safari 6.x on Mac OS 10.x?

                                             

                                            -Elaine