Chrome 18 3d translate performance - html

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.

Related

WebGL: Software only, hardware acceleration unavailable (on chrome but not chromium)

I have webgl software only on chrome yet hardware accelerated on chromium on the same machine.
How can i figure out the problem? because if this happens for a lot of people then there is less incentive to use webgl in the first place.
Google Chrome:
Chromium:
It's also possible that nothing in about:flags will fix this
I have tried various tips like resetting all flags, or enabling the "Override software rendering list" option and they didn't work for me
It turns out there is another place to look, under chrome://settings/ there is "Use hardware acceleration when available"
I remember now I had turned this off a few months ago as it was glitchy when using an external monitor via a Thunderbolt dock
Flipping it back on and using the laptop display only I now have nice smooth accelerated WebGL
As suggested by the comments, resetting all flags in about:flags fixed the issue.

HTML 5 Canvas performance in IE 9 on Windows 7

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.

Chrome 18 rendering artifacts around form elements

After upgrading to Chrome 18 on OSX 10.7.3, we started noticing fleeting rendering artifacts seemingly related to form elements:
They come and go during scrolling, it seems. I've been testing in a variety of other OS/Browser environments and have been unable to reproduce this, nor had it happened in previous versions of Chrome.
This is a mature, stable web app with fairly complicated HTML/CSS. I haven't been able to produce a simple test fiddle that reproduces this.
Anyone else seeing issues? Can you think of a possible HTML/CSS cause and not a Chrome bug?
I also noticed that Chrome 18 displays artifacts in some pages, but this only happens when that page is GPU accelerated. I asked a similar question a few days ago:
GPU acceleration crashes website
Chrome enables the hardware acceleration when it detects 3D transforms in your CSS.
You can go to chrome://flags and enable the "Composited render layer borders" option, if you see green squares all around your page thats because some CSS rule is causing your page to be hardware accelerated. You can try removing any 3D CSS rules or assign a higher z-index to these elements. It usually helps.

CSS transitions, animations have terrible performance, behavior

I'm working on a page turn animation. The performance is disappointing. Particularly if you take the pages class and make it something like 800px wide (paste $('.pages').css({width: '960px', height: '600px'}); into your console). I used to have around 16 transitions running at once and reduced it to 9, many of which are transforms! I don't know what else I can do.
Chrome does not seem to be using the GPU. It spikes the FPS on initial page turn but then dips down at regular intervals (enabled this with about:flags):
Try it out in Safari and you will get better performance but see that the animations do not sync up, often lag behind each other, and there's a weird wobblyness that Román Cortés's project also suffered from in the same browser (I haven't made it work in Fx yet).
There hasn't been much good material about how to optimize CSS transitions and animations on the web and I've been mostly teaching myself. I was hoping someone would have this kind of advice.
In order to take advantage of the GPU you have to use translate3d(x,y,z) instead of translate(x,y) in your -webkit-tranform's. This will force Chrome to use the GPU to render the animations.
Beware that while the performance will greatly increase if the computer has a good video card, it will also degrade on a slower hardware.
Here's a page flip I did for our launch of Sencha Animator. It's also inspired by Ramon Cortes' original, but uses different mechanisms - as far I as remember. It's super smooth in Safari and on iOS, but kind of jerky on Chrome desktop. Haven't checked it in Android 4 yet though.
I'm using Chrome 17 on OSX, and it seems fine - runs at around 20-30fps, no dipping or graphical issues. I suspect that this is just an issue with older Chrome builds.
Animating box-shadows and -webkit-gradients is very expensive, try removing them temporarily to see if it improves performance. If it does, see what you can do to replace them with images.

What does Google Chrome mean to web developers? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
From a web developer point of view, what changes are expected in the development arena when Google Chrome is released?
Are the developments powerful enough to make another revolution in the web? Will the way we see web programming change?
Or is it just another web browser?
I think this is just another web browser. The most impact I expect to be improved Javascript performance, and the usability perspective. The first will benefit developers, especially when using Google Gears. I think the users will benefit the most from an enhanced user experience, the safety features, and ease of use.
I can only hope other browser vendors (MS) will follow Mozilla and Google to create a faster Javascript implementation, since this is the only thing that can truly impact web development.
This is long-term positioning for Google; they are clearly trying to build a more stable application platform for web-based development. All of their changes (security, sandboxing, process isolation) are clearly intended to make the browser a better application for hosting complex apps.
This is what Microsoft was worried about with netscape, and why they broke antitrust rules to "cut off their air supply". It's going to be interesting to see how MS responds.
It's also interesting to see how the mozilla / firefox team deals with this- Google is pretty much funding firefox now, so it's going to be a potential conflict of interest for these folks down the road.
In a nutshell, things are going to get more complex, require more testing, and will (hopefully) force recalcitrant vendors like Microsoft to become more standards-compliant.
Considering most develops want to reach the larger audience, it just means one more place to test. Since it uses Webkit, hopefully it will render almost identical to Safari.
Integrated Gears may mean a solid place for apps to be developed though. If you have an internal system it may be nicer to just put Chrome on all the machines than building an app that runs locally.
I think the whole purpose or at least the emphasis of the release, as Kamiel said, is to provide better javascript performance. So many of Google's services rely on heavy javascript usage that this is a smart move by them. This should be good for everyone as IE and Firefox work to compete against Google every browser should get better at javascript.
Google Chrome looks promising. It is of course in an early beta so it's missing a lot of the things people would need or at least feel they need, like plugins, cross-machine synchronization of data (could be done with plugins), cross-platform support (ie. Linux and Mac versions).
So far it renders Gmail like a bat out of hell, so I'm going to pay very close attention to it.
Edit: In fact, these posts are done using it, and except for some minor issues like smaller font in input fields, it works as I expect it to. Fast, stable (already tested it with a javascript killer-page I have for some test applications).
This is just a natural for Google. This way they can control how well their apps work in a container on & off line. Expect more tools, potentially GUI designer type tools and an IDE for use with their cloud offerings as well as a mobile version of this for Android. It's most likely a lead in to Visual Google.
If they are smart they will have this container/browser perform other tasks like parsing content for a fresher Google cache and search results.
Personally, I'm hoping it has less of an impact on web developers and more of an impact on browser developers. Some of the features are really nice, and while the process-oriented approach to separation of tabs will probably make it hefty compared to other browsers, I like the ideas behind it.
My guess is it's going to have to spend a year or longer post-beta to make the kind of impact that Firefox has on web development.
I'd say that I see the improved Javascript engine being the major contribution as far as web applications go. And hopefully will cause a new look for the other browsers and possibly make Javascript implementations a bit more standardized.
Chiming in on this topic. If you have used Chrome, you'll notice a significant speed upgrade, especially on sites using js. I have found that it renders things almost EXACTLY the same as Safari (as you would assume), so I think this drastically minimizes the issue of having to develop on yet another browser.
I think the main thing Chrome does is to offer another (and even perhaps the best to date) alternative to IE. If people start using these, 'advanced' web browsers (man it's sad I have to say that), Microsoft will almost certainly have to step things up with IE9. IE8 seems to me to be more of the same from Microsoft who just can't seem to grasp the UI goodness and overall speed of Safari, Firefox and now Chrome. IE8 is freaking 360MB for godsakes. I think FF3 is like 90MB.
On a side note, has anyone checked out how fast Chrome opens? I found that very impressive.
#Lassevek - The first thing I did was check the js speeds on gmail and "bat out of hell" is precisely how I would describe it.
I just hope Chrome, Firefox and Safari can be temporary friends so they can overthrow IE. After that, it's fair game!
To be quite honest I've always hated Google, with a passion. But, I love their web browser Chrome. It just works. No need to download updates every 5 minutes, No stupid security bars that pop up every time you visit a website, and when I'm writing webpages - I don't even have to test my code anymore because it is standards-compliant, and it just works properly. My current website that I'm building now is about half-done, and it works and looks perfect in Google Chrome. Looks and works perfect in Opera, but as for Internet Explorer, it looks terrible, and it looks fairly good in Firefox.
I don't know. People should stop using Internet Explorer (in my opinion) because it just doesn't work the way it should. Have YOU ever noticed after downloading Internet Explorer 8 on WindwosXP that once you start visiting a few websites, the more sites you visit the longer it takes IE to open a new tab. Sometimes I'm left frustrated, almost sending me into a murderous-rage waiting for a new empty tab to open up! Blah!
As always, it depends on their implementation. If they decide to mess with the rendering engine, we could be looking at a whole new list of browser "quirks" which will mean WebDev's will be uber-pissed.
If they stay standards-compliant (which TBH, I expect they will) it could be a really good thing to heat up the competition.
Be interesting to see how the sandbox mode affects plugin compat, and of course, the tight Gears integration..
That fact that its OSS is a really good thing.. Since any of the above issues could easily be fixed with a patch as soon as the dev community get on to it. :)
Hopefully it will be standards compliant and erase a little midget of Internet Explorer's market share - Firefox has ease of use and plugins going for it, but "security" is something non-technical people can understand... which one could hope would make development easier.
That's assuming it stays standards compliant and innovates well, of course.
As long as there are the other web browsers (and I don't believe that they will die - which is good, because I don't want to see the internet in the hands of Google) it's just another web browser that you need to check compatibility with.
It's not good. More platforms leads to more testing, leads to more time fixing bugs, leads to less time having fun implementing new features, leads to anger, hate, suffering, etc.
I wonder whether plugins/addons will ever be a big focus for Chrome. It seems to be very much focused on providing a fast, clean environment that puts the focus on the web rather than the browser. I suspect that in order to keep it nimble and stable, they may keep the extension capabilities fairly limited (plus, they wouldn't want Adblock for Chrome, would they :-)
I wonder also, given Google's existing relationships with OEMs to include things like the Google Desktop on PCs sold, whether we might start to see Chrome pre-installed on computers. If that were the case, it might become more prevalent than other competitors to IE.
#bpapa
It's just another web browser that
very few people are going to use
because there are already 4 major
browsers out there that work just fine
for most people. It doesn't have the
extensions like Firefox,
Actually, it is pretty clear that it has a plugin architecture
it doesn't
have browser sync with an iPhone like
Safari, it doesn't come with your
computer like IE, and it doesn't...
well I don't know what Opera does that
makes it stand out but I don't think
Chrome has it.
"I don't know what Opera has, but this piece of software that I've never touched clearly doesn't have it"... what??
Another reason why I don't see it
taking off - since it's not on OS X a
lot of tech people aren't going to be
using it.
Did you miss the part where the Linux and OS X distros are coming right behind Windows?