Again, this test uses exactly the same framework. The only difference is in "change.css": this time we will make the box disappear completely.
This box will disappear completely when you click this link
View this page in Firefox. Click the link to make the box disappear, and then try to scroll the page using your mousewheel or arrow keys. Nothing happens.
You can regain scrolling by clicking anywhere on the page.
This bug does not appear in IE.
This time, we use the CSS rule "display: none". Unlike "visibility: hidden", this makes the box disappear entirely. Note that the page layout adapts as if the box had never existed.
So why is the bug happening? Well, when you click the link, it gains focus. Ever noticed those dotted borders that appear around links when you click them? They indicate that the link is "active". So this is what I think is happening: when you click the link, the browser in some sense "focuses" on the link. But then the link disappears; it's no longer part of the page. When you try to scroll, the browser, in some sense, tries to scroll onwards from the link. But the link has disappeared, so the browser doesn't know how to continue. Or something like that, anyway.
Note that, after making the box disappear, you can't tab between links.
The next test will demonstrate this behaviour more precisely.
The javascript and main stylesheet are the same as for test 1.
Here is the secondary stylesheet, "change.css":div#change { display: none; }
Here is some text to force a scrollbar:
More text
More text
More text
More text
/End