Почему не работает linear-gradient на Android?

Question

[Mak_Pet]

Есть простой макет
https://github.com/MakPet/pravki
https://makpet.github.io/pravki/

Нагуглил как задать разные цвета для body c помощью linear-gradient, но на мобильном это не работает.

body {
	height: 6160px;
	min-width: 1422px;
	max-width: 1440px;
	margin: auto;
	line-height: 1.4;
    background: linear-gradient(to bottom, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, 
    	#ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
 }

Как это можно исправить? Заранее спасибо.

Comments

[Moskus]

Работает. Вы в Хроме, наверняка, тестируете...

[Ankhena]

Начните с избавления от фиксированной высоты у body (и у других блоков тоже, так делать фу-фу и ведет к проблемам).
Задавайте фон каждой секции по отдельности и он будет растягиваться на всю её высоту и не будет неожиданных сюрпризов и от градиента избавитесь.

Answer 1

[tyzberd]

https://caniuse.com/#feat=css-gradients
https://autoprefixer.github.io/ru/
https://www.colorzilla.com/gradient-editor/

Comments

[Mak_Pet]

body {
  height: 6160px;
  min-width: 1422px;
  max-width: 1440px;
  margin: auto;
  line-height: 1.4;
    background: -webkit-gradient(linear, left top, left bottom, from(#87509c), color-stop(10%, #87509c), color-stop(10%, #17c2a4), color-stop(22%, #17c2a4), color-stop(22%, #e7f1f8), color-stop(37%, #e7f1f8), color-stop(37%, #ffff), color-stop(48%, #ffff), color-stop(48%, #ffdd99), color-stop(70%, #ffdd99), color-stop(70%, #d74680), color-stop(85%, #d74680), color-stop(85%, #3c5499), color-stop(98%, #3c5499), color-stop(98%, #344b8e), to(#344b8e));
    background: -webkit-linear-gradient(top, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, #ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
    background: -o-linear-gradient(top, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, #ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
    background: linear-gradient(to bottom, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, #ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
 }

Изменил код, но это не помогло.

[tyzberd]

Mak_Pet, у меня на моб хроме все ок. Вы кеш чистите? какой браузер?

[tyzberd]

мне кажется, не очень хорошее решение делать градиентом и фикс высотой блоков, я представляю там что то менять в тексте, все нужно будет подгонять

[tyzberd]

посмотрите это https://developers.google.com/web/tools/chrome-dev...
намного проще будет

[Mak_Pet]

tyzberd, а как тогда лучше это реализовать? Других идей у меня нет, увы.

[tyzberd]

Mak_Pet, каждому блоку добавить фон