Trotz der Krise

Endlich: so wie es momentan aussieht, unterstützt Mobile Safari unter iOS 5 die CSS Regeln “position: fixed” und “overflow: auto” bzw. “scroll”. Container, die mehr Inhalte boten, als dargestellt werden konnten, konnte bis und mit iOS 4 nur mit einem Scrollen mit zwei Fingern gescrollt werden. Wieso dies Apple so gehandhabt hat, ist mir immer noch schleierhaft. Ich habe auch schon sehr viele Supportanfragen diesbezüglich erhalten und bis anhin musste ich den Leuten erklären, sie müssten zwei Finger verwenden. Nun scheint Apple sich dies überlegt zu haben und externe Tools wie “iScroll” sollten nicht mehr notwendig sein. Natürlich ist es noch offen, ob diese Neuerungen auch im endgültigen Release vorhanden sein werden, doch gehe ich davon momentan aus, da diese Neuerungen schon in mehreren Beta Versionen vorhanden waren. Hoffen wir, dass es sich Apple nicht noch anders überlegt.

Auch die Eigenschaft “position: fixed” bringt viele neue Möglichkeiten für das Design. Insbesondere sollten dann wahrscheinlich alle Lightboxes zuverlässiger funktionieren.

Halleluja!

While working with jQuery on a client project I found that a simple animation of a background image, fading in and out in a loop, was very CPU hungry. Per default it used about 33% of the CPU, which I think, isn’t nice for a very simple animation. The problem actually is the loop, changing the opacity value dynamically over a short period of time. So my first fix was to set the fx.interval to a bigger value with the following code:

jQuery.fx.interval = 60;

In addition I inserted a small stop of 400ms and 800ms when the animation was completed at the point where the element was fully faded in and out. This brought down the CPU to about 13%, which is much better.

Yesterday I read about the new CSS3 animation technique which is hardware accellerated. So today I made a test on my office mac (iMac Core 2 Duo, 2.93 GHz) with the pulsating effect using pure CSS3 animations. If you are interested, here is the code:

.box {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: pulse;
-webkit-animation-duration: 3s;

}

@-webkit-keyframes pulse {
0% {opacity: 0.5;}
30% {opacity: 0.9;}
100% {opacity: 0.5;}
}

I loaded the page (with the jQuery animation disabled) in Safari and guess what? The CPU usage was back at 33%.

I know, my mac isn’t the newest one and you probably get a better result but many visitors won’t have a "better" machine while browsing your site.

What does this all mean? CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.