301637 - Gray Boxes appear at random with <pre>formatted text

Status: RESOLVED DUPLICATE of bug 365001

(Core :: Layout, defect)

Description

[Peter Berg]

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
(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/express/issue12/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.

Comment 1

[shadytrees]

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

Comment 2

[Roger Libiez]

I am confirming this bug:

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

Steps to reproduce:
1. Goto http://forums.smaugfuss.org/index.php?a=topic&t=2&min=80&num=20
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: http://img388.imageshack.us/img388/5034/greybox10rm.png
Grey box #2: http://img388.imageshack.us/img388/7374/greybox24bd.png

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.

Comment 3

[Aaron Slunt]

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?

ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla1.8

Comment 4

[Gabriel Sjoberg]

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

[Roger Libiez]

Confirmed as still happening:

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

Comment 6

[Matthew Schultz]

http://www.gentoo.org/doc/en/handbook/2005.1/handbook-x86.xml?full=1 also does this.

Comment 7

[Matthew Schultz]

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
Firefox/1.4.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050910
SeaMonkey/1.0a
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051010
SeaMonkey/1.1a

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

Comment 8

[Brian Polidoro]

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

Comment 9

[Daniel O'Connor]

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

Comment 10

[Justin Kerk]

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

Comment 11

[Adam Polkosnik]

It also happens when:
style="overflow-x:auto"
style="overflow-y:auto"
style="overflow-x:scroll"
style="overflow-y:scroll"
Also problem occurs when height is not set or above 32900 (most likely there's some signed 16 bit value)

Comment 12

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

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

[Adam Polkosnik]

Attachment: 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.

Comment 14

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

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.