Как победить артефакты css?

Question

[Александр]

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

jsfiddle.net/8jz3p4xr/12
На десктопе проявляется в Инструментах разработчиках в режиме мобильного устройства.
https://jsfiddle.net/8jz3p4xr/12/embedded/result/

Как избавиться от артефактов или есть другой вариант для реализации подобного эффекта?

Comments

[Lynn «Кофеман»]

Может вы словами опишите что надо получить?

[Александр]

Алексей Тен: http://автоспас55.рф раздел наш опыт. Не сочтите за рекламу) Дизайн заказной, верстка моя.

Answer 1

[Андрей Федоров]

градиент же...
codepen.io/aliencash/pen/YywjBb

Comments

[Александр]

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

[Андрей Федоров]

Ну а головой то подумать? Почитать мануалы?
codepen.io/aliencash/pen/VveRGg

[Александр]

Андрей Федоров: не нашел в мануалах про сглаживание.
codepen.io/anon/pen/epJXxe

[Андрей Федоров]

Там и нет этого. За то там есть про то, что такое градиент и что означают все эти параметры у background-image. Вы просто задаете переход от одного цвета к другому шириной 1% (в первом случае переход был шириной 0%, т.е. его не было и мы имели резко очерченную границу). Поэтому получается иллюзия сглаженности...

Судя по вашему форку я понимаю, что вопрос решен...

[Александр]

Андрей Федоров: у меня в хроме и опере такая картина: https://yadi.sk/d/-qRyDosxj7kAB
в мозиле, ie11 и ms edge все красиво: https://yadi.sk/d/mF0rgjTaj7kEs

[Андрей Федоров]

Не могу ничего сказать. Беглое гугление не дает результата... Попробуйте сами найти ответ.