We Keep Coding

Adobe Animate HTML5 Canvas issue w/ Google Chrome only. Animation is Lagging

We have published an HTML5 Canvas through Adobe Animate. And have reduced the file size down to under 2MB total and it loads in under 3 seconds on all browsers. But we are having frame (FPS) lagging issues on Google Chrome only.
We deactivated the 2D canvas chrome accelerator in Chrome Flags, but are still having issues getting the animation run smoothly at larger screen sizes.
Is there a way to publish the canvas in Animate so this doesn't happen? Or is there some JavaScript code to allow for Chrome to load the animation at the correct FPS?
We have tested in IE, Edge, and FF and all of those browsers run smoothly. It is only Google Chrome that is experiencing the issue.

Having profiled this, I have found that the code makes a large number of calls to drawImage. On my machine, it spent 86% of its time in calls to drawImage.
Its possible that its redrawing the large images every frame. See if there is a way to stop this from occurring.
Try removing the background images and having just the lines, if the lag disappears, you have your answer.
Potentially relevant:
Why does chrome struggle to display lots of images on a canvas when the other browsers don't?

Chrome canvas rendering speed bug?

Okay, so I'm running into a weird issue with a game I'm developing all of the sudden, I'm just wondering if anyone has seen something like this before:
When my window is sized below ~600,000 pixels, it runs very smooth. This is a profile taken at 989x610px:
When my windows is sized a little bit up from that, it slows to a halt, using 99% CPU and running at like 7fps. This was taken at 990x610px (1px wider):
The 990 isn't hard-coded anywhere, because the exact width that it slows down at is dependent on the height, it's more of a "total pixels" thing.
Anyway, I'm just wondering if anyone has seen this before, if it's a known issue, or if I should be filing a bug report with the chrome team.

When your window is that size or when your canvas is that size?
Either way I'm guessing its merely a Chrome bug and you should file a bug report. You should also test to see if its working on Chrome Canary.
There have been similar bugs in the past, such as this still-not-fixed bugs in Chrome for Android where the canvas has distinct functionality above and below 64k total pixels (see bugs here and here)

Down-Sized Images are Slow in Chrome

I'm working on a script and have an issue with Chrome.
Here's what I'm doing:
1. Loading large images into a DIV.
2. Scaling the images to fit the size of the DIV.
3. When the browser is resized, the image is scaled up and down with the browser.
Everything is working 100% in all browsers except Chrome.
I've checked the profiler in Chrome and don't see anything unusual.
These are large images, however are working just fine (even live) in all other browsers.
I've read a ton of places that have noted this issue when using down-sized images in Chrome...but not solution.
Nothing special going on, just using a
var img=new Image();
$(img).load(function(){ .... {);
Does anyone know of a workaround or solution that will work in Chrome?
Thanks!

So it appears that Chrome just sucks when it comes to handling large images and even images that aren't large, but just scaled down. I've searched around endlessly only to find similar questions without resolutions.
Still not sure why all other browsers (even IE 7 and 8) can handle large images (tested with 7mb scaled-down PNGs), but Chrome can't even manage to do a 700kb scaled-down JPG without lagging.
So, I'm answering this question with: in this instance, Chrome sucks.

I had exactly the same problem, but recently solved it. Huge amounth of performance takes up chrome's anti-aliasing, because it recalculates the entire image whenever you resize it.
So to solve it you just add this line to the css if your image:
#myImage
{
image-rendering: -webkit-optimize-contrast;
}
You can turn it off by javascript when the image is still.
More about anti-aliasing: Disable antialising when scaling images

How are you resizing the images? Using height/width or CSS transforms? The latter might result in better performance.
Some info:
Improving the Performance of your HTML5 App

When you're profiling issues with image resizes and decodes in Chrome, it's best to use the Developer Tools Timeline for this as it can give you relatively accurate stats on exactly what took a long time to be decoded.
Downsizing (or re-sizing) involves Chrome having to both decode the image (JPEG/PNG/GIF) you're sending down the line and then do extra work to resize that image into the container (div) that you would like to display it in. Where possible, the advice from the Chrome team is to prescale your images to the correct width/height needed.
Now you might be wondering: well, surely this issue is just down to desktop Chrome sucking, right? It's not as clear-cut as that. Particularly on mobile devices where browsers have less access to a powerful GPU/CPU, it's going to be costly to perform those resize operations there as well. So in short: yes, rescaling large images can be slow in Chrome sometimes. Try to prescale where possible and these performance bottlenecks should disappear.

Chrome 24 vs IE10 Scrolling Horrible Lag

I am currently developing a web application focusing primarily on Chrome 24.01312.57 and IE10. In the former browser, I am experiencing a large amount of lag. However, the latter experiences little to no lag, which is quite opposite to what everyone claims.
To show you the difference, I am recording the screens of my netbook using an iPhone while scrolling down The Chrome Webstore - something Google itself created.
Testing Equipment
2 year old Gateway Netbook -Single Core Intel Atom - 1GB RAM - Win7
iPhone camera (not that great recording solution, but it is quite easy to spot the difference)
Website: https://chrome.google.com/webstore/category/home (I scrolled down quite a bit for both the browsers before starting the test for those worried of AJAX loaded content slowing down the rendering)
Results
Google Chrome 24 (No extensions) scrolling down the Webstore:
http://www.youtube.com/watch?v=njkRqiNJPIY
Internet Explorer (No addons) 10 on the same page:http://www.youtube.com/watch?v=B_E_9OzPers
Note: Look at the mouse cursor and the scroll thumb - on IE10, the mouse is always on the the thumb whereas Chrome, it is all over the place indicating a high latency between mouse movement and the actual rendering.
Bottom Line:
Before I conclude, do realize that these lags on Google Chrome are increasingly magnified as the website becomes more complex and/or the specs go lower. However, IE10 is pushing the FPS quite high even in these conditions. I also did some analysis of the Chrome timeline. In reveals that the FPS drops as you zoom out to the point where rendering takes up to ~900ms per frame (on the Google Webstore) while IE10 is still fluid smooth (and better yet it retains that smoothness on an atom netbook)
As web developers, is there some CSS property/ies that is causing Chrome to render the pages with lag?
Why is Internet Explorer rendering so quickly?
What can be some steps to make Chrome render as quickly as IE10?
PS: Bug Report: http://code.google.com/p/chromium/issues/detail?id=163092 but no recent developments on this currently.

Chrome struggles with painting, especially at high resolutions such as 2560x1440 and above. Many websites such as the Chrome Web Store, Facebook, etc. exhibit significant scroll lag on it. IE10 maintains 120 fps on my monitor while scrolling on these sites.

I just had and fixed a similar issue.
Apparently Chrome isn't too smart about their recalculation of styles, besides that being terribly slow, so I focused on preventing it from recalculating anything.
I added the 'scrolled' class whenever the scroll event was triggered, but if it was already there, Chrome kept recalculating the new styles anyway. When I modified it to be like:
if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }
Chrome suddenly experienced a significant speedup (still no IE or FF, but much better than before)

It's the video card on the Netbook! You will experience similar effect on almost everithing that moves on your screen.
I have a Netbook...
The web you are testing crashed Chrome browser until not long ago...

IE7 CPU spikes, script problems & debugging?

A website I'm currently designing displays and works perfectly in all mac browsers, and Windows Firefox, Chrome and IE 8.
I'm having major problems in IE 7 though. Whilst the CSS is pretty much there (a few tweaks needed), the site is maxing out my CPU at 100% rendering the site almost unusable and giving me scripting errors and javascript functionality is not working.
I don't even know where to start trying to find out what's maxing out the CPU, or how to get more info on the scripting messages - it tells me the line the problem is on but it doesn't tell me what file.
I'd like to provide a link but the client has asked me not to.
Any help would be greatly appreciated.
Thank you

Most likely, this issue is caused by ie's poor png rendering capabilities. In the situation that I have experienced, we were using jquery ui 1.8.7 to render modal dialogs and seeing the memory usage spike by 6-8 mega every time a dialog box was opened. It turns out that the culprit was the opacity and alpha CSS settings in the default jquery styles. See this post for a possible partial fix.
Other things to note include:
There seem to be many fixes that attempt to address this issue.
Jquery 1.8.16 has a partial fix where the large memory jump will only happen when the first dialog box is opened.
We have also experimented by setting a single pixel png as the modal background and this rendering of a single pixel caused the memory used by IE to spike 80 megs and caused a temporary spike in CPU usage.
One other peculiar observation was that if we set the modal value of the jquery dialog to false and created our own modal background by appending a div whose background was set to a semi-transparent png, the memory leak seemed to be smaller.
The short of it was to stop using transparent pngs and the opacity and alpha settings foe rendering in IE.