CSS background linear-gradient fixed сильно грузит CPU при прокрутке, как пофиксить?

Question

[DrFreez]

Сейчас для фона использую такой код.

html {
	background: rgba(73,155,234,1);
	background: -moz-linear-gradient(-45deg, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
	background: -webkit-linear-gradient(-45deg, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
	background: linear-gradient(135deg, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
	
	-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
	-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
	box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
	min-height: 100%;
	background-attachment: fixed;
}

Answer 1

[Сергей Протько]

По сути никак, разве что отказаться от всего-этого. Комбинация box-shadow + градиенты + background-attachment: fixed по идее всегда будет тормозить ибо вызывает перерисовку всей страницы на каждый чих.

Answer 2

[Виталий Киренков]

Ну, у меня к вам есть несколько предложений.

Первое - у вас все цвета не имеют прозрачности, зачем вы тогда используете rgba, а не hex? (#000000 - пример.)
Второе - не уверен, что это поможет, но я бы сделал див на фоне, растянул его по высоте и ширине, и его бы залил этим стилем.
Третий - крайний вариант - сделать такую картинку градиентную и растянуть её через background-size: contain (либо cover) - и проверить нагрузку.

Comments

[Сергей Протько]

крайне сомневаюсь что есть хоть какая-то разница, как задавать цвет, через hex, rgb или rgba. На производительность это вообще никак не должно сказываться, ибо рендер движек всеравно использует одно и тоже представление цветов.

Так же сомневаюсь что хак с блоком поможет - это не поможет избежать полной перерисовки страницы при скроле, тени и градиенты это всегда затратно по ресурсам. Можно конечно попробовать поизвращаться со всякими 3D трансформациями что бы попросить браузеры по возможности рендрить это дело через GPU, но честно не знаю...

Картинка будет работать намного быстрее, ибо не нужно ничего вычислять.

[DrFreez]

@Fesor то, что картинка будет быстрее это понятно :-) Разрешения у всех разные, в этом проблема. Попробую svg как рекомендуют ниже, посмотрим, что будет

[Сергей Протько]

@DrFreez svg тормозить не будет, но пользователи старых андроидов будут грустить. Хотя они будут грустить при любом варианте кроме как картинки.