So I took the opportunity to look at a Javascript subject that so far had escaped my studies, that is, the Safari/Gecko canvas tag. The canvas tag offers powerful drawing capabilities which are performed right in the browser, have a look at some of it’s capabilities.
Of course, IE goes a different way and does not support canvas. Still, by applying its CSS filter attribute one can get a similar reflection effect.

While I was working on the new version and already had a first working version I came across the nice reflection.js by Cow, which does exactly what I was trying to get. Exactly the same way I was trying to do it. And it worked. I was too late.
I thus scrapped my code and took reflection.js, modified it a bit and fixed some bugs. Here it is, have a look at the demo page.
Compared to the scriptaculous version, this code seems longer and of course less elegant. But it is still pretty straightforward, possibly except for the scalings and offsets. You also have to keep in mind that there are actually two routines in it, for both Safari/Gecko and IE.
Since both the canvas tag and the IE CSS filter only support linear gradients, the fade option introduced in my “faster reflections” version had to be dropped, sorry.

var Reflector = {

  reflect: function(element) {
    element = $(element);
    options = $H({
      amount: 1/3,
      opacity: 1/3
    }).merge(arguments[1] || {});

    // ******************************************************
    // the following code is based on "reflection.js" v1.0 by
    //           Cow http://cow.neondragon.net
    //           Gfx http://www.jroller.com/page/gfx/
    //           Sitharus http://www.sitharus.com
    //           Andreas Linde http://www.andreaslinde.de/
    //
    // modifications & fixes by Julian Dreissig
    // ******************************************************

    // compute size of reflected and total image size

    var reflectionWidth = element.width;
    var reflectionHeight = options.amount * element.height;
    var divHeight = (options.amount) * element.height;

    // replace image element by div containing the original image plus the reflection

    var d = Builder.node('div', {
      style: 'width:'+reflectionWidth+'px;'
           + 'height:'+divHeight+'px;'
    });
    element.parentNode.replaceChild(d, element);
    d.appendChild(element);

    // create the reflection

    if (document.all && !window.opera) {

      // Internet Exploder: apply MS filter via CSS

      var reflection = Builder.node('div', {
        style: 'width:'+reflectionWidth+'px; '
             + 'height:'+reflectionHeight+'px; '
             + 'background:url('+element.src+') 0 -'+(element.height-reflectionHeight)+'px; '
             + 'filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options.opacity*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+element.height+');'
      });
      d.appendChild(reflection);

    } else {

      // Intelligent browsers (FF, Safari...): create canvas element

      var canvas = Builder.node('canvas', {
        style: 'width:'+reflectionWidth+'px; '
             + 'height:'+reflectionHeight+'px;',
        width: reflectionWidth,
        height: reflectionHeight
      });
      d.appendChild(canvas);

      var context = canvas.getContext("2d");
      context.save();

      // Firefox needs some offset tweaking
      var ffOffset = /WebKit/.test(navigator.appVersion) ? 0 : -1;

      // mirror and draw image
      context.translate(0,reflectionHeight*2+ffOffset);
      context.scale(1,-1);  // mirroring along x-axis
      context.drawImage(element, 0, element.height-reflectionHeight, reflectionWidth, reflectionHeight, 0, reflectionHeight, reflectionWidth, reflectionHeight);

      // create fading gradient
      var gradient = context.createLinearGradient(0, reflectionHeight, 0, 2*reflectionHeight);
      gradient.addColorStop(0, "rgba(255, 255, 255, 1)"); // black
      gradient.addColorStop(1, "rgba(255, 255, 255, "+(1-options.opacity)+")");
      context.globalCompositeOperation = "destination-out";
      context.fillStyle = gradient;

      if (/WebKit/.test(navigator.appVersion))
        context.fill();
      else
        context.fillRect(0, reflectionHeight+ffOffset, reflectionWidth, 2*reflectionHeight);

      context.restore();
    }
  }
}

Again, feel free to use the code as you like and/or drop me a comment. Please note that reflection.js is published under a MIT-style license, which I thereby adopt for my code: MIT-licensed it is.

Yes, in the meantime reflection.js has evolved to version 1.5, fixing the bugs I also had fixed and more. So my code is not even worth a bug report. I really have some bad timing…

However, it’s performance so far is a bit weak. It is a proof of concept and Thomas himself calls it “not really meant for production use yet”. In the following you find an (speedwise) improved version, which boosts rendering time by a factor of 2–3.
Demo and comparison page

In Thomas’ original code the reflected image consists of a stack of divs, each of one pixel height and containing a shifted copy of the original image. The code loops over the rows of the image, creating and attaching one corresponding reflection row div at each cycle.

So, changes have been made as follows:

• the reflected image is constructed out of divs with (shifted) background images, reducing DOM complexity
• the constructed divs are attached to the DOM only after all divs have been created, thus avoiding unnecessary updates of the browser view
• added a fade option, which determines the fading behaviour. By default it’s set to 1, that is, a linear fade. A quadratic behaviour (fade:2) seems to look more natural (idea by jakdak), try it out and judge yourself.
  Setting fade to zero disables the fading.

Tested with Safari, Firefox and IE (6.0). The scriptaculous setOpacity()-function seems not to work in Opera, the reflected image is not fading.

Feel free to use this code as you like, comments are very much appreciated.

var Reflector = {
  reflect: function(element) {
    element = $(element);
    options = $H({
      amount: 1/3,
      opacity: 1/3,
      fade: 1
    }).merge(arguments[1] || {});

    var p = element.parentNode, n = element.nextSibling;
    var d = 1.0/(element.height*options.amount);
    var f = document.createDocumentFragment();

    (element.height*options.amount).times( function(line) {
      var h = Builder.node('div',{
        style: 'height:1px; width:'+element.width+'px;'
              +'background-image:url('+element.src+');'
              +'background-position:0 '+(line+1)+'px;'
              +'overflow:hidden;'
      });
      $(h).setOpacity(Math.pow(1-d*line,options.fade)*options.opacity); // IE needs the $()
      f.appendChild(h);
    });

    // update the view now
    p.insertBefore(f,n);
  }
}

To use the Reflector you could insert something like this into your page:
Event.observe(window,'load', function(){Reflector.reflect('myImage');});.