Gray Boxes appear at random with <pre>formatted text




14 years ago
12 years ago


(Reporter: pberg1, Unassigned)



Windows XP

Firefox Tracking Flags

(Not tracked)




(1 attachment)



14 years ago
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

I am the editor of a QuickBasic programming e-zine called QB 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):

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). displays what appears to be the same problem:

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:


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.

Comment 1

14 years ago
Can reproduce bug. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b3)
Gecko/20050712 Firefox/1.0+

Comment 2

14 years ago
I am confirming this bug:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050806

Steps to reproduce:
1. Goto
2. Start scrolling down the page until you see the box.

Actual Results
The large light grey box blocks viewing of the content underneath.
The other darker grey boxes have nothing in them.

Expected Results
The light grey box should not be there, and the darker grey boxes should have
visible code content in them.

Additional info:

Grey box #1 blocks the mouse scroll wheel if the pointer is hovering over it.
Grey boxes like #2 will return if you switch to another app on the taskbar and
then come back to Firefox. Scroll the items back out of view and then scroll to
them again and they will disappear again.

Image links:
Grey box #1:
Grey box #2:

Both IE and Opera 8 display the content as expecte with no strange results.

The code boxes are formatted using <div> tags with <pre> tags inside them and
using the following CSS code to format their looks:

div.code      {margin-left:20px; margin-top:5px;}
div.codetitle {font-size:12px; color:#000000; font-family:Verdana, Arial,
Helvetica, sans-serif; font-weight:bold; margin-bottom:2px;}
.codelines    {width:1em; font-size:11px; background-color:#EEEEEE;
color:#333333; border:1px #555555 solid; border-right:0; font-family:Courier
New, Courier, serif; text-align:right; float:left; padding:3px;}
pre.codedata  {width:61em; font-size:11px; background-color:#FEFEFE;
color:#333333; border:1px #555555 solid; font-family:Courier New, Courier,
monospace; text-align:left; overflow:auto; padding:3px;}

As reported earlier, middle clicking in the page soemwhere outside the first
light grey box causes the problem to go away, at least for me, but I have other
users on the site who report that doing so does not solve the problem.


14 years ago
Ever confirmed: true
Keywords: clean-report, css2

Comment 3

14 years ago
WFM Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050901
Firefox/1.0+ ID:2005090104

Reporter, and gabrielsjoberg, can you reproduce using the latest branch build?

Comment 4

14 years ago
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050901
Firefox/1.0+ ID:2005090106

I can confirm that this behavior persists in the latest nightly.

Comment 5

14 years ago
Confirmed as still happening:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050904

Comment 7

14 years ago
I tested the gentoo site on:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050910
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051010

They all exhibit the same problem.  Shouldn't this bug be marked as Core and not
Firefox since it affects all mozilla browsers?


13 years ago
Depends on: 343000

Comment 8

13 years ago
*** Bug 352307 has been marked as a duplicate of this bug. ***

Comment 9

13 years ago
#352307 contains a simplified test case, if it's any help


12 years ago
Component: General → Layout
Product: Firefox → Core
Version: unspecified → Trunk
QA Contact: general → layout

Comment 10

12 years ago
*** Bug 363202 has been marked as a duplicate of this bug. ***

Comment 11

12 years ago
It also happens when:
Also problem occurs when height is not set or above 32900 (most likely there's some signed 16 bit value)

Hmm, I can't reproduce this with any of these testcases, though the issue in bug 365001 is still present.  Can you guys retest?  There was a small window of time right around when this was filed where some big-integer protection was broken.

Comment 13

12 years ago
Created attachment 252843 [details]
test case that works with Minefield Build 2007012404 on XP

Test case that works with Minefield Build 2007012404 on XP.
Simply click on the side scroler on the right and drag it approximately to row 2048.
Ok, so the gray boxes bug was fixed with bug 365001, but your testcase reveals another bug -- the text seems to just stop rendering at that line.  I'm going to dup this against 365001, and I just filed 368249 with your testcase for the other issue.
Last Resolved: 12 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 365001
You need to log in before you can comment on or make changes to this bug.