WebKit CSS Animation behavior weirdness

Okay, not weirdness. I guess more like (up until now) undocumented behavior. Due to a workaround that I needed to implement in order to properly clear out CSS properties when starting a new transition in my hacked-out S5 presentation, I filed Bug 23528: CSS transitions on opacity fail when used with visibility in certain circumstances.

When performing a transition, I had expected that a function like the following (simplified for demonstration) would work:

/**
 * 1. take the element,
 * 2. make it visible,
 * 3. yet transparent,
 * 4. then set the transition,
 * 5. and then have it fade from opacity of 0 to 1 over one second.
 */
function fadeIn() {
    // <span id="one" style="visibility: hidden;">testing</span>
    var theOne = document.getElementById("one");
    theOne.style.visibility = "visible";
    theOne.style.opacity = 0;
    theOne.style.WebkitTransition = "all 1s ease-in-out";
    theOne.style.opacity = 1;
}

Instead of fading in over one second, the span instantly appears, as if the last three lines of the function didn't even exist. This happens because CSS changes don't take effect when you assign new values. They queue up, taking effect once the JavaScript thread of execution ends. This makes sense for static changes, so that if you have a whole load of changes to apply to the DOM where many of the changes end up canceling out by the time the thread ends, the browser has no reason to apply each one of them to the DOM just in order to remove the change in the end. It also makes sense in a pure performance sense, since this keeps the JavaScript execution moving along at a nice, steady pace, rather than having to wait for the DOM to apply the change before moving on to the next step in the process.

Unfortunately for the code example above, it means that since the DOM node starts out completely opaque, the last three lines of the fadeIn function do effectively fall off and the span simply becomes visible. In order to get around this, the last couple of lines have to run on a different JavaScript "thread" so that it splits up the batched DOM changes into two parts and the node properly fades in:

function fadeIn() {
    // <span id="one" style="visibility: hidden;">testing</span>
    var theOne = document.getElementById("one");
    theOne.style.visibility = "visible";
    theOne.style.opacity = 0;
    setTimeout(function() {
        theOne.style.WebkitTransition = "all 1s ease-in-out";
        theOne.style.opacity = 1;
    }, 0);
}

Proposal in for IPC 2009

I should hear back within a couple of weeks as to whether I'll need to start learning some basic German before heading to Berlin at the end of May. I just made the deadline for the International PHP Conference' call for papers, basically to give the "Digging Through the Guts of Enterprise PHP" talk, albeit reworked based on how it went at the Zend/PHP Conference last September.

Macworld

Anyone heading to Macworld this week, should feel free to swing by booth 3418 in the North Hall and say hello! I attend in order to demo and talk about IBM Rational Build Forge to and with anyone interested. It may seem like an odd thing to demo at Macworld, but I have prepared things especially for showing off in MacOS 10.5, which I use on both my own personal machine and my work machine.

Enterprise Guts slides up, with CSS animations

I just realized that I didn't post the final version of my slides from my talk at ZendCon, but now I have: Digging Through the Guts of Enterprise PHP. However, they will only work in Safari, since I hacked CSS transitions into S5. Different builds of WebKit (and different releases of Safari) will have varying degrees of support for everything used in there (sliding, fading, and flipping). For the talk itself, I ended up having to go back a couple of weeks in the WebKit builds, since they broke a few things... Part of the fun of using experimental technology in a nightly build, though.

As a bonus, this means that the slides (mostly) work in the iPhone/iPod Touch version of Safari:

Due to how S5 triggers moving to the next slide, you just need to bring up the control bar at the bottom so you can tap on the arrows to move forward. In the last bit there, the animation of two simultaneous transforms, flipping the slides around, caused what we software engineers refer to as a "rendering freak out" followed by mobile Safari freezing up. All in due time!

OLPC G1G1

Having taken part in the first round of OLPC's G1G1, I can definitely say that these things make fantastic ultra-portable machines. Since they run Redhat-based Linux (which you can of course replace with Debian if you prefer, or just replace the UI), you can easily install everything from FreeDoom to Apache HTTPD Server. In short order, I installed subversion, Apache HTTPD Server, PHP5, and MySQL (Vim and SSH come preinstalled). Since they designed these things for kids to carry to school through everything from rain storms to sand storms, they'll out-rugged anything else even remotely like it.

Or, you can give it to someone you know who can get use out of the myriad of Activities it includes for kids to learn everything from reading and writing to programming to music.

Either way, Go give one.

Opera may have just found what it needed

Today, the Opera Desktop Team and Jon Hicks both announced Jon's joining Opera as Senior Designer! This comes as very exciting news to someone who has had to continually add "...and Opera." to many browser discussions here in the States, even among fellow developers.

Jon's biggest challenge (and advantage) will, in my opinion, come in the form of making Opera approachable and continually usable to new users, without hiding its power from them. I definitely wish the both of them the best of luck, and eagerly wait to see what happens next.

Power Failure + Road Trip = Fail

Well, that sucked. Back on a normal hosting service...backup power supplies work much better when outages only last a matter of seconds.

S5 with CSS Slide Transitions in WebKit

So, in an effort to have the ability to post my slides for my Zend/PHP Conference talk online without having to rely on Flash or typically awkward HTML exports from other formats, I've decided to go with S5, as mentioned previously. I've also decided to add a little of WebKit's recent additions of CSS transforms and animation support for transitions.

Since CSS CSS animation only occurs when attributes change, it just means that the current and next slides need to have the changes applied at different times, or at the same time, depending. To make managing these things easier, I started with a base object:

function Transition() { }
Transition.prototype = {
 "duration" : 1,
 "cslide" : null,
 "nslide" : null,
 "transition" : function(toggle) {
  this.cslide.style.WebkitTransition =
   this.nslide.style.WebkitTransition =
    (toggle
     ? 'all ' + this.duration + 's ease-in-out'
     : 'all 0s none');
 },
 "prepare" : function() { },
 "perform" : function() { },
 "cleanup" : function() { },
 "run" : function(cid, nid) {
  this.cslide = document.getElementById(cid);
  this.nslide = document.getElementById(nid);
  this.cslide.style.visibility = this.nslide.style.visibility = 'visible';
  this.transition(false);
  this.prepare();
  var dis = this;
  setTimeout(function() {
   dis.transition(true);
   setTimeout(function() { dis.perform.apply(dis); }, 0);
  }, 0);
  setTimeout(function() {
   dis.transition(false);
   dis.cslide.style.visibility = 'hidden';
   dis.cleanup.apply(dis);
  }, dis.duration * 1000);
 }
}

The code managing the switch of the slides now calls RunTransition(transitions[snum], cid, nid);, where transitions just holds an array of constructor references corresponding to the slide numbers (snum):

var transitions = [
 null,
 Fade,
 Wipe,
 Rotate,
 Rotate,
 Fade
]

function RunTransition(className, cid, nid) {
 var trans = new className();
 trans.run.call(trans, cid, nid);
}

Each transition just extends Transition and overrides the applicable methods in order to change the slide CSS properties at the correct time, like this Fade transition:

function Fade() { }
Fade.prototype = new Transition;
Fade.prototype.prepare = function() {
 this.cslide.style.opacity = '1';
 this.nslide.style.opacity = '0';
}
Fade.prototype.perform = function() {
 this.cslide.style.opacity = '0';
 this.nslide.style.opacity = '1';
}

I've uploaded a very quick demo of the transitions in action, which will work in whichever builds of WebKit support CSS transforms and animation. It worked a bit smoother in WebKit builds a few weeks ago than those current (bugs galore at the moment), but nightly builds always tend introduce unpredictable behavior.

Update (1/25): Between fixes in the WebKit trunk since this post, and fixes in my code (with many thanks to smfr in comments and on the bug itself), all of the transitions work in the current Webkit nightly! From my final note, just in case anyone else has issues with transforms when used with transformations:

"If you set the WebkitTransform using just matrix() in the first step, then set the WebkitTransition, then set the WebkitTransform using both matrix and scale, it (reasonably) will not apply the transformation. When I set both both functions for the start and end styles, it works beautifully."

Google launching open source browser based on WebKit?

No idea whether this theory holds any water, but given the recent speculation hitting...everywhere, I checked http://code.google.com/p/chrome/ and found a login screen (quickly followed by a permission denied error), rather than a Not Found error for a project that doesn't exist.

Wondering what this will bring to WebKit that Safari doesn't (aside from Gears and even-more-targeted advertising), but I guess we'll see soon enough.

Edited to add: the more I read about this, the more it looks like they ported a bunch of features from Opera (tabs above window chrome, long-running scripts' threads not killing your browser, Speed Dial-like default page, etc.) to a WebKit-based browser with what sounds like XUL for the window chrome itself. I guess tomorrow we'll find out for sure, but it seems a bit odd that an open source project would outright deny access to the public before launch, and distribute the info under the most closed-minded CC license available (feel free to share it, just don't touch it, don't charge for it, and you'd better tell people who made it). I suppose after the recent Android SDK excitement, this still makes a decent step forward, but still. I guess so long as it takes market share away from IE, I shouldn't complain too much.

Target to pay out $6M and have quarterly/annual accessibility tests

Found via Glenda the Good, this marks a huge milestone in moving from infrequently enforced laws regarding government sites to making sites and web applications of private entities accessible to the general public.

"As part of the settlement, Target will establish a $6 million fund from which members of the California settlement class can make claims. In addition, the National Federation of the Blind will certify the Target Web site through its Nonvisual Accessibility Web Certification program once agreed upon improvements are completed in early 2009. Target and NFB have agreed to a three-year relationship during which NFB will perform accessibility testing of the Target Web site. For more information about the terms of the settlement, please visit www.nfbtargetlawsuit.com."

The $6,000,000 fund doled out to those who file claims will draw attention to this, but to me the (comparatively) rapid compliance and ongoing tests make this worthwhile. Target won't just throw money at the issue, but will make its site accessible to those using assistive technologies, and maintain that for at least three years following!