QB Express Celebrates One Year: Issue #12 Released

[Pete]

I just submitted an extensive bug report to Mozilla (bugzilla.mozilla.org).

The Bug # is: 301637

Here's my report:

Opened: 2005-07-21 15:54 PDT

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4



Description:
I am the editor of a QuickBasic programming e-zine called QB Express (http://www.petesqbsite.com/sections/express) where we regularly publish large blocks of pre-formatted, indented source code using the <pre> tag. Since the source code is often wider than the box that contains it, I have applied the "overflow: auto" CSS attribute to the <pre> tag. As a result, the code boxes will scroll to the right if the source code is wider than the <blockquote> box that contains it.

For many months, readers have been complaining about random opaque gray boxes appearing on top of the text, obscuring everything below them, when they load issues of the magazine in FireFox. These appear nearly every time the page is loaded up, by every user, though they do not always appear in the same place.

You can see screen captures of them here (images will be available for 90 days):
http://fileanchor.com/1289
http://fileanchor.com/1290

About 90% of the time, the gray boxes will disappear if the user "clicks" with scroll-wheel button on their mouse somewhere in the margin to the side of the gray box. Other times, they will disappear when the page is refreshed or if the user scrolls up and down in the browser window very quickly. However, sometimes they will not disappear no matter what the user does.

--------

I have investigated this problem, and discovered that it also appears on other websites that include pre-formatted source code boxes. They tend to show up more often when the page is very long (50-200 printed pages in length). UbuntuGuide.org displays what appears to be the same problem:

http://www.ubuntuguide.org/

My site and UbuntuGuide are common in that we both use <pre style="overflow: auto"></pre> to enclose blocks of source code so that it will display within the set width of our layout (and not stretch out the whole layout and make it difficult to read).

I believe that using <pre>formatted text in conjunction with the overflow: auto CSS attribute triggers this problem.




Reproducible: Always




Steps to Reproduce:
1. In FireFox, load up:

http://www.petesqbsite.com/sections/expr...index.html

or

http://www.ubuntuguide.org/


2. Scroll down. Somewhere on the page there should be large opaque gray boxes obscuring part of the text. They appear almost every time you load up the page. If they don't appear at first, try refreshing.


3. If you would like to make the boxes disappear, try clicking with your mouse's scroll wheel in the margin of the page next to the gray box. If the box doesn't disappear, try refreshing the page or scrolling up and down quickly. For me, I can get the gray boxes to disappear 99% of the time.

Other users, however, have had different results: "Actually, the gray boxes appear in the same place for me always and don't go away with a middle-click..."




Actual Results:
You will see large gray boxes obscuring the text.

Chances are, you'll be able to make the boxes disappear with minimal effort, though this may not necessarily happen.




Expected Results:
No gray boxes should have appeared.