CSS3 background-size свойство, вызывающее серьезные проблемы с производительностью в ff5 - PullRequest
Новая
       34

CSS3 background-size свойство, вызывающее серьезные проблемы с производительностью в ff5

1 голос
/ 20 июля 2011

Сегодня я собирал страницу и думал, что я бы реализовал полосатый фон с помощью CSS3. Все выглядело нормально во всех браузерах, кроме Firefox. (Я использую 5.01, но тоже проверил в 5.0)

Код достаточно прост: 

    body {
    background-color: #ebeced;
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%,
    transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
    background-size:6px 6px;
    }

Прекрасно работает в Chrome и Opera, но практически вылетает FF.

Очевидно, я знаю, что могу добиться этого эффекта с помощью повторяющегося фонового изображения, но мне было интересно, если у кого-то еще была похожая проблема, или это просто проблема прорезывания с CSS3 снова;)

Тестирование в jsfiddle вызывает те же проблемы, я не стал играть на скрипке, так как не хотел нести ответственность за то, что сбил вас!

О, и это не медленная проблема с ПК, я на i7, 8 Гб оперативной памяти, бла-бла.

Я считаю, что это проблема со свойством background-size, так как если вы увеличите его или удалите его полностью, тогда проблема будет решена, однако она не подходит для меня, если я не могу использовать background-size.

Ответы [ 2 ]

2 голосов
/ 31 августа 2011

Я почти уверен, что знаю, в чем проблема.

Проблема с производительностью не очень очевидна для меня, но я нахожусь на новом четырехъядерном процессоре.Что я вижу, так это то, что когда я создаю пустую страницу и помещаю туда эту CSS, то, если я изменяю размер браузера, перерисовка становится немного неуклюжей.

Проблема заключается в том, что вы комбинируете рисованиеCSS3 градиенты с разбиением на градиенты очень маленького размера (6 пикселей).Это означает, что на каждые 1000 кв. Пикс. Площади страницы градиент будет составлять 27 777 раз [1000/6 в квадрате].Это тонна!Умный браузер нарисует градиент один раз, а затем разметит его.Кажется, что Firefox может рисовать градиент каждый раз.Если это так, то это действительно было бы ошибкой.Если я изменю свойство размера фона на что-то большее, например 20px, то я больше не вижу проблем с производительностью, а другие увидят.Если вы не хотите, чтобы ваши пользователи сталкивались с подобными проблемами, я бы сказал, что вам следует избегать этой комбинации, потому что на более медленных компьютерах по-прежнему будут проблемы, когда вы их не увидите.

Простое решение состоит в том, чтоне использовать градиенты css3.Просто создайте изображение - браузеры хорошо разбираются в них.Даже с изображениями иногда лучше использовать большие изображения ...

Ранние версии Netscape Navigator использовались для игнорирования фона, если они были меньше 40x40 пикселей.Я помню, как обнаружил причину ошибки, которую я пытался устранить, и осознал, что, хотя было бы неплохо иметь возможность использовать изображение 1x20 для фона, поскольку это был бы минимальный размер файла, это был не лучший выбор дляпроизводительность, потому что это создает гораздо больше работы рендеринга для браузера.Вместо этого я создаю увеличенную версию изображения размером 50x20.Эффект тот же, но он экономит время обработки.

0 голосов
/ 20 июля 2011

Вы пытались добавить ... 

-moz-background-size:6px 6px;

... к вашему css?

...