November 2002
Here's a bug in Gecko engines which proves that miracles still happen in our time. You've heard of multiplying loaves and fishes, right? Well, our 21st century version of that biblical account is multiplying hyperlinks. Yes, you're about to witness links that clone themselves with just the wave of your magic wand (your trusty mouse). There's only one catch to this miracle—unfortunately the links are inedible (I know, I know, it's downright corny).
Now that I've whet up your appetite let's see what this multiplication is all about. Without further ado let's get to the meat of the problem (you'll forgive the overkill in food idioms—it's lunchtime as I'm typing up this documentation).
To see the multiplication effect be sure you're using a Gecko browser. Mozilla version 1.0.1 and higher should have the bug, including Netscape 7 and all(?) versions of Phoenix thru 0.4 (tests thus far show that Mozilla 1.0/Win does not have this bug). Now try hovering over the various links below and see if some of them magically replicate themselves. The link should append another copy to itself every time you mouse over and out of it, such that if the original link is "hyperlink" you should end up with "hyperlinkhyperlinkhyperlink" after one mouse over and one mouse out. Each action will append one copy.
After you've filled up your screen with multiples of hyperlinks do a refresh to tidy up your magic slate. Then try hovering over them again. As in first load you will notice that some links will multiply while others won't. Moreover, links that do multiply may sometimes refuse to do so. I haven't detected any pattern or reason for this behavior yet. Perhaps just like assistance from the high heavens the miracle of multiplication for a particular link is unpredictable.
You will also notice that links that have no whitespace (single words for instance) will multiply without wrapping. They will just continue in one straight line to the right of your screen. But a horizontal scrollbar should appear and allow you to see the train of monotony extend ad infinitum.
Now I'm sure you're already dying to know the scientific community's unbiased and objective explanation for this miracle. The multiplication effect is triggered by the combination of CSS pseudo element :first-line on a block element and the pseudo class :hover on a hyperlink. If for instance we had the following basic markup:
<body>
<p>
This will demonstrate the multiplication effect
in the most recent builds of Gecko browsers. If you don't
have a Gecko browser yet download
<a href="http://www.mozilla.org">Phoenix 0.4</a>
</p>
</body>
the following CSS might trigger the bug.
a:hover {}
p:first-line {}
I say 'might' because there seems to be a need for several lines of text before a link for the bug to be triggered, and as stated above a particular link that multiplies may not do so again upon reload/refresh and vice versa—one that rebels against cloning may change its mind on the next reload.
Note that neither rule has to have any declarations. They can both be empty. But you do have to write down a:hover {} and p:first-line {} (or the corresponding block element where the link is found) in your stylesheet for the effect to be triggered. Actually you can even pare down the CSS to :hover {} :first-line {} to trigger the bug. For this page, however, the pertinent CSS is as follows:
a:hover {color: red; /* just to distinguish replicates from one another */}
p:first-line {/* nothing declared here */}
As you can see all paragraphs on this page are affected. But because the p:first-line rule has no declarations paragraphs do not get any special first line styling.
Below are paragraphs which have hyperlinks. Some of them will exhibit the bug. Some won't. Try mousing over the links and see which ones multiply. Remember to reload the page after you've finished filling the canvas with multiplicities, replicates and clones. Then try them out again and see which links will and will not replicate the second or nth time around.
There should be enough text before the first link for the multiplication effect to be triggered. This is probably because of the :first-line rule. I'm rambling and being wordy here to squeeze in more text just before the hyperlink because if there isn't enough then you won't see the interesting multiplication on the fly ... or on the hover. Ok, that should be enough. Now mouse over the following: This is a dummy hyperlink. There may or may not be text after the link. It doesn't matter. I distinctly remember that any other link after the first may or may not exhibit the multiplication effect, although it seems that only one link per paragraph is affected per load. This last observation needs to tested further.
Interestingly once a link is cloned the styles of the replicates alternate between the one specified (by author or by default) in a:link and that specified in a:hover (if any). If for example, as in this page, a different color is declared in the hover rule then colors will alternate.
Let's try a paragraph with a short text before a link. Will this be cloned? I bet it won't be, but if somehow you can get it to multiply do tell! I'd certainly would want to know what conditions trigger it.
I'm running out of things to say so I'll just advertize my site. If you're interested in CSS, nay, if you're passionate about CSS, then you may wish to visit my humble abode that's dedicated to Cascading Style Sheets. Just bring your mouse pointer over here and click on the following link: CSS Hub. Did the Hub replicate? Did it? Did it?
The quacky bored fox jumped over the lazing dogs. The quirky foxes jumped over the languishing dog. The late fox quickly jumped over the lounging dog. The quick brown fox jumped over the lazy dogs. Ah, finally remembered the classic form. If the following link replicates then it should do so without wrapping because there's no whitespace in it. The supercalimajig will continue past the right margin and a horizontal scrollbar should then appear as you keep mousing around: Supercalifragilisticexpialidocious.
I remember singing that silly song back in school. We had no choice. Either sing or get a failing mark in music. So who cares if we could sing it or not? Or even if I can faithfully recall the lyrics today? ... even though the sound of it is something quite atrocious; if you say it loud enough, you'll even sound precocious; supercalifragilisticexpialidocious!.
If you find any more quirks do inform me.
And that's all folks!
Do I hear an encore? Yes? Ok then. For my last and most daring number I will try to make clones of myself. This calls for audience participation. With a little help from you dear reader I should be able to pull it off (time and again actually). Drum roll please.... Now wave your magic wand over my name— Edwardson Tan . TA DA! There should be any number of me on your screen now.
Yes, I changed the styles for a:link and a:hover in the above paragraph. I also added a a:hover:before rule just to add more flavor.
The copies are true clones in the sense that clicking on any of them will bring up the page or in the case above a new email message form.
Thanks to loro for discovering that this bug is Gecko-wide and not just limited to Phoenix as I first thought.