Following a Twitter link I found this tutorial, organized in slides, that should theoretically be an introduction to HTML5 for XHTML developers. In practice, the page is almost completely unusable due to the interaction of scripts and browser-specific meta tags. I mean, contents are really interesting, but the pagination is somewhat broken after the fifth slide (even in Chrome). When I saw Chrome taking so much to paint the layout, I honestly said to myself: "Something is very wrong here".
The problem occurs even in Firefox 4 just after the fifth slide. When you click on the next button, a global reflow takes place. I don't know if this is due to an AJAX call to fetch the next set of slides, but surely the reflow breaks the layout. After that, something is missing and the sliding effect is compromised.
First, this page starts with this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This will affect both Internet Explorer and Chrome, but we don't honestly know if such element may affect also other browsers. For example, Firefox 3 on Mac had a bug with some IE-specific meta tags. For this reason, it's better to avoid them.
Viewing the page source it's clear that there are several scripts loaded into the document, but their position in the source is not consistent: some scripts have been put in the head section, others in the body section and also some calls to the JavaScript document.write() method appears here and there. It's better to avoid this and get more consistency by placing all the scripts in one section (generally body).
The script that handles the slides is completely procedural and makes use of some variable preloading using the load event of the window object. The problem is that the functions are not attached by event handlers, but directly inserted as inline JavaScript calls in the markup, thus making debugging even harder.
This script is the key, among other things, to fix the rendering and scripting problems encountered on this page.