Кажется, что использование CSS-градиента требует слишком много ресурсов процессора. Я делаю что-то не так? - PullRequest
3 голосов
/ 22 августа 2011

Хорошо, сейчас я пытаюсь создать классно выглядящую таблицу с использованием CSS-градиента, который поддерживается Firefox, Opera, Chrome.

Выглядит отлично, но слишком сильно отстает.Когда я прокручиваю страницу вниз, она сильно отстает.Это медленно даже на супер быстром компьютере, поэтому это не связанный компьютер.Я также пытался с различными браузерами, все еще отстающими.Когда я отключаю функцию градиентного цвета фона, она возвращается в нормальное состояние.

Так, как я могу решить эту проблему или есть какой-нибудь другой способ, которым я могу сделать классно выглядящую таблицу.спасибо.

вот так выглядит таблица http://img202.imageshack.us/img202/4905/howlook.png

Это пример класса, который я использую для таблицы 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); 
    }

1 Ответ

8 голосов
/ 22 августа 2011

Это проблема, которую должны решать поставщики браузеров, а не вы. Вы обычно используете CSS3 градиенты.

Я предлагаю вместо этого отправлять отчеты об ошибках соответствующим поставщикам. Если вам нужна хорошая производительность прокрутки, просто смиритесь с альтернативой. Фоновые изображения отлично подходят для этого; вам не нужно делать все с помощью CSS.

...