Recently a Chrome extension our company uses was reported to be causing extreme slow down in the UI when in use. Ive been trying to find the cause of this issue.
After a week or two I have narrowed it down to the canvas's drawImage method.
Initial thought was that this method was holding onto the thread for too long.
This extension works great up to Chrome V43 (couldn't find chrome V44 anyway). With the current version 45, it causes heavy delay on UI response. Seems like a chrome bug.
Googling around I found this https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=490478
I am not sure if this is exactly the issue I am running into with drawImage but taking the suggestion from someone who posted there, I went into chrome://flags/ and disabled "Disable accelerated 2D canvas".
This instantly solved the issue & the extension is actually working better than ever before. The question is why? and how can this be used to make a temporary fix to the code since it'd be unreasonable to just ask everyone to disable this flag.
Related
I'm working on a project using KineticJS version 4.6 (currently the latest version), and since last night's Chrome update to Chrome 29, the Kinetic canvas is completely blank. While using the console, I am still able to detemine that the created objects, such as the Kinetic.Stage and Kinetic.Layer, still exist and are filled with correct data.
Afterwards, I tried loading the same page in Internet Explorer and Firefox, and they still work as intended, showing the canvas with the correct elements.
I have tried searching for people with similar issues, but I guess Chrome's update is too recent to show any results. Does anyone perhaps know if there is a way to fix it or if I should simply wait for either a KineticJS or a Chrome update?
EDIT: And now it suddenly works again after restarting Chrome. Hotfixed?
EDIT2: After a while it broke again, but restarting the browser seems to work
EDIT3: It is a bug in Chrome, acknowledged by the Chromium team in this thread. The thread states that the bug is definitely fixed in version 30, which is currently in beta. This fix may be merged in version 29 soon, but there is no definitive timetable for this.
We have the same problem in Chrome 29.
In some cases a workaround is to tell your users to use Chrome Incognito mode to fix this issue.
A test to replicate the issue consistently is posted here:
https://github.com/ericdrowell/KineticJS/issues/585
At present, the bug is not present in Chrome 30. (8/27/2013)
You should star this chromium issue:
https://code.google.com/p/chromium/issues/detail?id=280153
threejs is having some serious issues with some polygons
I'm on their site, viewing their examples.
On my computer, It starts out fine, like the first image below, but within a few seconds, becomes the mess in the second part of that image.
you can see that it works in your browser here
I've tried clearing my history, cache, cookies, anything I can think of. I've even switched Firefox from Chrome. nothing seems to work.
any ideas? is this a webgl issue?
This appears to be an AMD Catalyst driver issue. I uninstalled it and the issue was resolved. It's now using the default drivers. I'll update if I ever install new drivers, but for now I'm leaving it as is.
This is an HTML 5 Canvas application. It's a pretty standard "designer" application where the user adds objects to a layout, moves them around, and edits their properties.
It works very well, but it turns out to have real performance problems in IE 9 on Windows 7. I would appreciate any thoughts!
Operations often take 10 seconds instead of the usual 2 seconds.
Also, after using the application a little while, the browser gives an error message that the host "is not responding", giving options Recover Webpage and X. Once that starts to happen, it happens for every user action including the File menu, and I can only get out of it by editing the URL location text. In particular, it generally happens on any attempt to use the browser's profiler in Developer Tools. This is obviously frustrating, but it may also be a clue. I wondered if there might be pending synchronous AJAX calls, as suggested by this error message, but capturing the network traffic using Developer Tools suggests that all calls are complete.
The problem seems specific to this combination of browser and OS. IE 9 on Windows Server 2008 behaves OK, and so do Firefox and Chrome on Windows 7. The problem is the same for 32-bit or 64-bit IE.
Most of these operations have a server-side component too. For example, adding a text object makes an AJAX call to serve an image for the object. The server API is implemented as a small TurboGears application which uses ImageMagick for the image processing. But rough profiling indicates that nothing unusual is happening on the server side. This suggests that the problem really is in the JavaScript.
The Task Manager shows the browser using CPU of 90% or more when the application is running. This is true for any browser, not just IE 9. This is likely because of the tight rendering loop in the application, so one idea we had was to redraw the canvas less often. Unfortunately this did not seem to help. requestAnimationFrame seems like a good idea, but is not supported in IE 9.
A colleague suggested that using the Google Chrome Frame plug-in might help. It might be an acceptable solution, but I haven't tried it yet.
I found some advice to turn on the Control Panel option "Use software rendering instead of GPU rendering", but that doesn't seem to help.
One thing I have noticed: It seems the canvas is much slower in IE if you start drawing on it when it's not in the document.
So I do document.body.appendChild(canvasEl) before I draw. You can even make the canvas element dislay: none; but at least it should be in the body.
Update: It seems that for Chrome and Firefox, appending the canvas to the body is slower. So if you don't need it to be added to the body, don't add it for Chrome and Firefox.
I'm trying to understand these strange rendering error boxes that are too big to be ignored. This seems to happen on Chrome in Windows 7 (my testing isn't too elaborate) and nowhere else. When I attempt to inspect, they all disappear. This could be some kind of video card issue as I'm using some pretty advanced CSS3 transitions that could mess up memory. In any case, if someone could offer advice on what I could do to fix, I'm at a loss. The site is www.crane-usa.com
Having the same issue with our site using 21.0.1180.89 and 21.0.1180.79. Problem is in Windows 7, Mac OS X latest, Ubuntu and in Chrome frame running in IE9. IE9 with Chrome frame disabled works fine. The problems are intermittent and unrepeatable. Inspect element removes the problem as you say. I tried disabling GPU compositing via chrome://flags but that didn't fix the issue.
We and our users have only been seeing these issues since approx Aug 27, 2012, 3 days ago. I took a look in crbugs.com and found that this seems to have existed for a couple of weeks already. http://code.google.com/p/chromium/issues/detail?id=143647
Sorry our site is not public so I can't post our url but you're not alone.
Just updated Chrome to 18.0.1025.142 from 17 on a Mac running 10.7.1 and it's killed the performance of our site. We've been using translate3d where available to move a large number of items around the screen. I'm animating with requestAnimationFrame. In 17 we were getting framerates upwards of 50fps. Now lucky to get 15fps. It's really bad.
Has hardware acceleration been turned off by default? Anyone else noticed any problems like this? I've noticed the font rendering has been improved and is now on a par with Safari (which runs the site beautifully) maybe this change has had an effect on general rendering performance?
I'm afraid I can't share the link due to an NDA. But any help would be greatly appreciated!
Update:
As far as I can tell it IS still GPU accelerated but the performance is really bad, other people have reported similar things. The Chromium builds of v19 seem to be back to the old quality of performance.
There used to be a flag when launching chrome --show-composited-layer-borders which would put red borders around gpu accelerated elements. This option now seems to have been added to chrome://flags/ but it paints green borders around layers and doesn't seem to distinguish gpu elements any more. Does anyone know of an option to show if elements are being rendered by the gpu?
chrome://gpu/ says that everything is being hardware accelerated...
Reproduce the problem with fresh code in a new web page. This will greatly help both your SO question and bug report.
Browsers regularly tweak whether hardware acceleration is used based on whether your graphics card and driver version is supported. Updating your graphics card driver may fix the problem for you, but maybe not everyone else. (This tool I wrote might help: graphics driver updater)
In fact it's a bad idea for your website to depend on hardware acceleration, because a significant fraction of users have crappy unsupported hardware and/or out of date drivers which are blacklisted to stop the user's computer crashing while they browse the web. They'll get crappy, un-accelerated framerates too, in any version of Chrome.
So IMO the real problem is your website depends on hardware acceleration which not everyone has, and you just noticed because Google blacklisted your setup in Chrome 18.