Recursive Spirals using just HTML and CSS

Apparently Safari crashes on all of these, so you have been warned

Safari update: I'm told these all now work fine as of v73/ beta 2

A. Fixed width/height spiral

B. Scale-to-fit window spiral (collapses in IE6)

C. Scale-to-fit window spiral (works in IE6 thanks to setting body and html widths and heights)

D. Strobing spiral NB. DON'T LOOK AT THIS ONE IF YOU SUFFER ADVERSE REACTIONS TO FLASHING LIGHTS. If for any reason, clicking on the link fails to present you with a confirmation dialog to proceed to the page, the actual url is "SpiralStrobe.mthml"

Operas 7, 6 and 5 are quite simply the best and can't be faulted. Bizarrely, OmniWeb 4.1.1 is very nearly almost as good. IE5/mac is fairly impeccable, but for some reason I can't work out it's screws up the starting point quite spectacularly in B, and gets carried away and makes the body element as long as it is wide in both B and C. Gecko-browsers suffer from glitches which get worse as the spiral gets tighter (also depending on how the viewport is sized in the scale-fit versions). IE6 is just that bit worse (and moreover, fails to cope with B at all), leaving IE5 to come in a quite erratic last. Well, except for browsers like iCab and Amaya which, poor sweet things, don't really get the hang of things at all. And Safari which crashes.

On the css-discuss list, Big John offered up an explanation and further demonstration of the discrepancies between the various browsers:

Well, I don't know if it is decorative or useful, but I did a test page that shows the 'rounding error' that sometimes accompanies absolute positioning when using percentages or EM's.

The demo should look like a single black rectangle, but all my win browsers show mysterious 'gaps' at various screen sizes. The construction is simply a 5x5 matrix of 25 black boxes, each positioned via 'top: xx%; left: xx%', and sized in percentage as well.

View it in Moz and (using the sidebar panel) alter the width of the sidebar by dragging it. Moz will resize 'on the fly', and the horizontal gaps can be seen shifting around in a most bizarre manner. Dragging down screen size will alter the pattern of gaps in every browser, but not 'on the fly'.

I noticed that Opera does not show the gaps between the first and second AP boxes (both horizontally and vertically), no matter what the screen size. I suspect this is why your 'spiral' demo is good in that browser. Your method allows only one chance for the 'gap' to occur, and then shifts to a different direction. Thus (according to my theory) Opera never shows the gaps that I believe are messing up other browser's displays.

This crazy and totally useless idea of the recursive spiral came to me while travelling back home on the London Underground in a drunken haze.


Valid XHTML 1.0 Valid CSS

Back to CSS index