Question

Alright now i am trying to make a cool looking table with using CSS gradient feature which is supported by firefox,opera,chrome.

It looks great but it lags too much. When i scroll down the page it lags greatly. It is slow even at super fast computer so it is not related computer. I also tried with different browsers still lagging. When i disable gradient background color feature it returns normal.

So how can i fix this issue or are there any other way i can make cool looking table. thank you.

this is how does table look http://img202.imageshack.us/img202/4905/howlook.png

This is an example class i use for table tds

 .ML0
    {
                  color: #000000;
        text-decoration: none;
        background: rgb(229,229,229);
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(229,229,229)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(255,255,255)) );
        background: -moz-linear-gradient( center bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
        background: -o-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
        background: -ms-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); 
    }

Answer 1

This is a problem that browser vendors are the ones supposed to fix, not you. You’re using CSS3 gradients normally.

I suggest you file bug reports with the respective vendors instead. If you need good scrolling performance, just put up with an alternative for now. Background images are great for this; you’re not required to do everything with CSS.