For the flickering issue on iPhone when using Transition CSS, for example this link: iPhone WebKit CSS animations cause flicker
My question is what exactly "-webkit-transform:translate3d(0,0,0);}" does conceptually that solves this issue?
The declaration -webkit-transform:translate3d(0,0,0);} activates hardware acceleration: iOS uses its GPU instead of CPU and the result is way smoother.
Translating by 0 pixel in 3 directions doesn't change anything to the position of your pixels so it's safe, except if it overrides an existing transform.
EDIT: it's been one way of activating GPU for a few years now but - broadening your question - it's not the only one and Chrome is changing or has changed its compositing/layer system. I didn't follow thoroughly these changes or new ways of activating it but you'll learn a lot by viewing demos on YT by Paul Irish, the Chromium blog, Google Devs or html5rocks
Related
An application running on our company intranet used to use a jquery opacity animation to show a bunch of blinking indicators. As many of our systems are old and slow I updated this with an animated gif which drastically improved the responsiveness and page scrolling of the browser.
I then discovered that the majority of our users, who access the site through a terminal server, have internet explorer animations disabled through a group policy. Therefore they can't see the animating gif. It's hopeless asking the admins to enable this, they just cite performance issues etc. Is there any html code I can use to trick IE into allowing this image to animate? If not, what is the best (least processor / memory intensive) way of displaying an animation if I can't use a gif?
Going on the fact "blinking indicators" sounds like quite minimal animation, have you looked into css3 animations? Needs IE10+, though.
Also: JQuery is a big library for just an animation. Raw javascript may keep things smaller.
I have created this personal website: www.lonewulf.eu, but I am getting poor performance in the following browsers:
Performance:
Chrome - Good(as it should)
Firefox - Good(a bit slower than Chrome)
IE 9 - Medium/Slow
Opera - Extra slow/laggy
Now, I do have a lot of flash overlays(3 flash files) and a portfolio showcase on the same page which doesn't help but even if I remove those it still lags. It seems to be a css issue, any suggestions on this?
CSS: http://www.lonewulf.eu/css/main.css
Taking some stabs in the dark (no IE here atm), I see a few potential issues:
You're using web fonts extensively; for older browsers, this can have a sizeable performance impact;
You seem to set up a bunch of incomplete css transitions; you define how long the transition is, and what the transition function is, but you never specify which property you want to transition.
You appear to be loading jQuery twice.
I'm working on an HTML5 interactive using phonegap and one of my pages involves using pinch-zoom functionality on an image. I've managed to get this working perfectly using the [iScroll][1] plugin but the zooming functionality is unacceptably slow. On the iPad however, everything runs incredibly smoothly.
I did read that the CSS 3 'translate3d' attribute can be used to force hardware acceleration (and this seems to be working on the iPad) but doesn't seem to have any effect on Android. From what I've read it seems that hardware acceleration isn't yet supported on Android browsers but I'm basically asking whether this is false and it is indeed possible or if there are any effective workarounds?[1]: http://cubiq.org/iscroll-4
depending of android version, see canius : http://caniuse.com/#feat=transforms3d
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.
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.