10 Replies Latest reply on Sep 14, 2017 3:11 AM by tomeraz

    HTML Animation Flickers When Resizing Browser Window

    Corryt32

      This issue seems to be still very common, even with the latest Adobe Animate CC 2017. I created an animation logo, and published it. When I place the HTML code in the website and link the javascript file, the logo animation will flicker when the browser window is being resized. This flickering will also happen when scrolling up and down quickly on an iPhone or iPad. This seems to be an ongoing issue, I see it in a lot of Google search results, including here: Canvas flickers when resizing window 

       

      Apparently this "flickering" is because in the code there is some resizing of the canvas that occurs or it's something to do with HiDPI support. Even when trying people's certain solutions, I could never get the logo animation to be at the right size across all devices and with no flickering. I gave up in the end, and just exported the animation as a 20MB GIF file (at a larger scale), then reduced it using CSS, so that it looked more crisp and clear on the desktop and retina displays.

       

      Adobe really need to look into this "flickering" issue because it looks tacky and unprofessional - I hope a solution is created soon in the next software update. 

        • 1. Re: HTML Animation Flickers When Resizing Browser Window
          ClayUUID Adobe Community Professional

          If you think forcing EVERY user to download a 20 megabyte animated GiF is preferable to some flicker for a few people, your priorities are very much misplaced. Especially on mobile devices, where data is often limited.

           

          I will agree though that this could use fixing.

           

          Incidentally, it's generally agreed by usability experts that constant peripheral animations are bad design, because they distract the eye from whatever the user is actually trying to concentrate on.

           

          Animation for Attention and Comprehension

          • 2. Re: HTML Animation Flickers When Resizing Browser Window
            Corryt32 Level 1

            Thanks for the feedback. Being a graphic and web designer, I'm just quite picky with how the logo was flickering.

             

            There is one more issue I should note.  I produced the animation at 2 x the intended size, then scaled it down on the website, because I thought retina devices needed images 2x for them to be clear. However on normal screens, when the browser is resized smaller, and hence the logo becomes smaller, the HTML animation became very unclear, almost like the sharpness was set at 500%.

             

            In regards to your comment about animations being "bad design" - my client wanted part of the logo to animate, and you'll see on the site, it's not too distracting at all. That's the animated logo GIF on the website: http://www.covadis.online/wordpress - I used 3G on my smartphone and the page seemed to load at a good speed - if you found that it loaded very slow, please let me know. 

             

            Also if you find a solution to fixing the flickering please let me know, otherwise hopefully it's fixed in the next update.

            • 3. Re: HTML Animation Flickers When Resizing Browser Window
              ClayUUID Adobe Community Professional

              Anyway, I've discovered the source of the problem. When you resize the browser window, a function in the HTML that Animate publishes gets called. This function always sets the width and height attribute of the canvas element, even when it hasn't changed. But surprise, setting the width or height of an element makes browsers consider that element to have been resized, even when the size hasn't changed. This wouldn't be a problem, except that resizing a canvas element clears its contents. So the canvas content disappears until CreateJS's next scheduled redraw. It's a perfect storm of unintuitive behaviors.

               

              Here's my suggested fix. In the HTML that Animate publishes, there's a function called makeResponsive. It starts after the line "//Code to support hidpi screens and responsive scaling." and ends right before "makeResponsive(true, "both", false, 1);" (or similar). Replace that function definition with this code:

               

              function makeResponsive(isResp, respDim, isScale, scaleType) {

                  var lastW, lastH, lastS = 1;

                  window.addEventListener("resize", window.requestAnimationFrame ? resizeCanvasReq : resizeCanvas);

                  resizeCanvas();

                  function resizeCanvasReq() {

                      window.requestAnimationFrame(resizeCanvas);

                  }

                  function resizeCanvas() {

                      var w = lib.properties.width, h = lib.properties.height;

                      var iw = window.innerWidth, ih = window.innerHeight;

                      var pRatio = window.devicePixelRatio || 1, xRatio = iw / w, yRatio = ih / h, sRatio = 1;

                      if (isResp) {

                          if ((respDim === "width" && lastW === iw) || (respDim === "height" && lastH === ih)) {

                              sRatio = lastS;

                          }

                          else if (!isScale) {

                              if (iw < w || ih < h) {

                                  sRatio = Math.min(xRatio, yRatio);

                              }

                          }

                          else if (scaleType === 1) {

                              sRatio = Math.min(xRatio, yRatio);

                          }

                          else if (scaleType === 2) {

                              sRatio = Math.max(xRatio, yRatio);

                          }

                      }

                      if (iw !== lastW || ih !== lastH) {

                          canvas.width = w * pRatio * sRatio;

                          canvas.height = h * pRatio * sRatio;

                          canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + "px";

                          canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + "px";

                          stage.scaleX = pRatio * sRatio;

                          stage.scaleY = pRatio * sRatio;

                          stage.update();

                      }

                      lastW = iw; lastH = ih; lastS = sRatio;

                  }

              }

               

              This makes three major tweaks to Adobe's code.

              1. It pipes the window resize event through requestAnimationFrame instead of calling resizeCanvas directly. This ensures the resize code isn't executed more often than once per window redraw.
              2. It only resizes the canvas when its size has actually changed, eliminating needless redraws.
              3. When the canvas is resized, it tells CreateJS to immediately redraw the stage, minimizing flicker.

               

              Tested in desktop IE11, Firefox, and Chrome. Seems to work okay.

              1 person found this helpful
              • 4. Re: HTML Animation Flickers When Resizing Browser Window
                rayek.elfin Level 4

                Corryt32  wrote

                 

                Thanks for the feedback. Being a graphic and web designer, I'm just quite picky with how the logo was flickering.

                 

                There is one more issue I should note.  I produced the animation at 2 x the intended size, then scaled it down on the website, because I thought retina devices needed images 2x for them to be clear. However on normal screens, when the browser is resized smaller, and hence the logo becomes smaller, the HTML animation became very unclear, almost like the sharpness was set at 500%.

                 

                In regards to your comment about animations being "bad design" - my client wanted part of the logo to animate, and you'll see on the site, it's not too distracting at all. That's the animated logo GIF on the website: http://www.covadis.online/wordpress - I used 3G on my smartphone and the page seemed to load at a good speed - if you found that it loaded very slow, please let me know. 

                 

                Also if you find a solution to fixing the flickering please let me know, otherwise hopefully it's fixed in the next update.

                What the heck? That GIF logo animation is 21mb. The site took 20 seconds here in Vancouver to open. That is unacceptable for web, and you are forcing mobile users to waste their bandwidth. Sorry if I sound a bit harsh, but you really ought to optimize it with a GIF optimizer before uploading. Flash Animate CC GIF output is terrible, and utterly un-optimized.

                 

                I used https://ezgif.com/ and the default conversions settings to reduce your logo animation to a mere 310kb - same quality and size.

                1 person found this helpful
                • 5. Re: HTML Animation Flickers When Resizing Browser Window
                  Corryt32 Level 1

                  Thank you for the solution, the code worked and doesn't flicker. Much appreciated

                  • 6. Re: HTML Animation Flickers When Resizing Browser Window
                    Corryt32 Level 1

                    Thank-you, the Ez Gif website really helped and reduced the GIF file size down, and it did look like the same quality too. Very much appreciated for your help

                    • 7. Re: HTML Animation Flickers When Resizing Browser Window
                      Nipun Asthana Adobe Employee

                      This issue has been fixed internally and should be available with the next Animate update.

                      • 8. Re: HTML Animation Flickers When Resizing Browser Window
                        Colin Holgate MVP & Adobe Community Professional

                        Nipun, can you look at this Muse post?:

                         

                        Re: Responsiveness issue - I broke the template

                         

                        Is there any connection between the flickering in Firefox and Safari when resizing the window, and what you had to fix for the Animate problem?

                        • 9. Re: HTML Animation Flickers When Resizing Browser Window
                          Nipun Asthana Adobe Employee

                          I'm afraid, the fix for Animate will not be relevant for Muse as the responsive-page handling between the two apps is quite different.

                          Someone from the Muse team only should be able to help there.

                          • 10. Re: HTML Animation Flickers When Resizing Browser Window
                            tomeraz

                            Using multiple createjs canvas stages on a web page.

                            Thanks for the suggested code. seems to work on desktop.
                            However every time I scroll the page, on iOS Safari and Android Chrome, all the stages are cleared and repainted again (causing a long flicker for all stages).

                            Is there another way I can avoid the repaint on every scroll ?