Anybody here anymore (FF css borders cause slugglish scrolling)?

[Chuck Anderson]

This place looks deserted. ... anyway

I have an administrative page at my web site the displays member entries
in a table (Php, MySQL). One member entry per row.

I have defined selectors for the table cells to create a subtle 3D look
for each table cell - highlight border for top and left, shadow border
for bottom and right:

td.header
{
background: #597DA2; color: #eee;
text-align: center;
font-weight: bold;
padding: 2px 3px 2px 3px;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ddd;
}

td.data_left
{
text-align: left;
padding: .2em;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ddd;
}

td.data_center
{
text-align: center;
padding: .2em;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ddd;

}

td.data_right
{
text-align: right;
padding: .2em;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ddd;
}

The table contains about 100 member entries. In Firefox 3 and 3.5 (I
don't like 3.6), scrolling this page vertically uses a lot of CPU and it
is very, very sluggish and jerky. Through experimentation I have
discovered that if I simply change the border declarations from 2px to
1px, the sluggishness goes away.

Opera (9.64) and IE8 have no problem scrolling either of these, Safari
is a little slow, but much better.

So what is Firefox's problem, and is there something I can or should do
differently with my css (I really do prefer the 2px borders).

Demo page:
http://cycletourist.com/temp -> "Firefox Sluggish Scrolling - css problem"

--
*****************************
Chuck Anderson • Boulder, CO
http://www.cycletourist.com
Turn Off, Tune Out, Drop In
*****************************

[Robert O'Callahan]

On 23/02/10 9:02 PM, Chuck Anderson wrote:
> The table contains about 100 member entries. In Firefox 3 and 3.5 (I
> don't like 3.6), scrolling this page vertically uses a lot of CPU and it
> is very, very sluggish and jerky. Through experimentation I have
> discovered that if I simply change the border declarations from 2px to
> 1px, the sluggishness goes away.
>
> Opera (9.64) and IE8 have no problem scrolling either of these, Safari
> is a little slow, but much better.
>
> So what is Firefox's problem, and is there something I can or should do
> differently with my css (I really do prefer the 2px borders).

It's probably due to antialiasing at color change at the border corners.
Do IE8 and Opera antialias there?

Rob

[Chuck Anderson]

Someone else does look here. Cool ô¿Ô¬ ... and thanks.

Good call. I checked FF and Opera using the magnifier of an eyedropper
tool and indeed, FF puts a 1 pixel intermediate color in the corners
where the border colors meet. Opera and IE8 do not.

I don't suppose there is any way of eliminating this, is there? I like
the 2 pixel borders a lot better than 1px, but they look just fine in
IE8 and Opera without the anti-aliasing.