Я получаю все больше жалоб относительно плохо сделанных градиентов (CSS, Canvas и SVG).
Как это сильно зависит от браузера и ОС. Я не могу предложить глобальный MCVE. Поэтому я сосредоточусь на этом простом градиенте CSS, который плохо отображается в Chrome/Ubuntu (вертикальные полосы):
body {
background: linear-gradient(90deg, #111, #444);
}Во многих случаях это не обязательно ошибка ОС или браузера, это больше проблема, что многие люди не знают, как работают градиенты, и почему они имеют узорную форму.
Это очень проблема яркости каждого цвета. В вашем примере легко найти светимость градиента, так как его градиент с градациями. Поэтому взгляните на рисунок ниже, где я поставил самый темный и легкий цвет градиента бок о бок. Вы заметите, что они имеют немного отличающуюся яркость. Если вы сделаете черный немного легче (или серый немного темнее), образец начнет исчезать.
Теперь, чтобы сделать его понятным, начнем с этого простого градиента. (Не волнуйтесь, я попаду в проблему с шаблоном) Выглядит довольно грязно, не так ли? Особенно, что серый в середине градиента.
Если мы посмотрим на колесо RGB Color, мы увидим проблему. Градиент проходит прямо через середину колеса, что является действительно размытым пятном. Мы можем избежать этого, если мы просто начнем добавлять еще одну остановку в нашем градиенте, например, в зеленый цвет. Если вы сравните его с колесом с правой стороны, вы не увидите, что это позволит избежать части в середине. Градиент ниже намного ярче и не выглядит размытым.
Но теперь у нас есть довольно жесткий шаблон в нашем градиенте. Это, как уже упоминалось выше, потому что у нас много разных светимостей. Поэтому мы фактически не хотим проходить через спектр RGB с нашими градиентами, мы хотели бы больше походить в цветовое пространство, основанное на освещенности. И это цветовое пространство HSL. Ниже вы сравниваете наш градиент initla red-to-cyan между RGB и HSL, и вы заметите, что в градиенте HSL значительно меньше полосы. В Интернете есть инструмент который мне нравится использовать для градиентов. Вы можете дать начало и конечную точку (и шаги между ними), и она генерирует градиент во всех разных цветовых пространствах, и в основном я выбираю HSL, потому что он наиболее естественный.
TL;DR Проблема с этими шаблонами часто является проблемой яркости градиентов, и если вы попытаетесь изменить цветовое пространство, это будет работать намного лучше. Теперь я не говорю, что ifferent мониторы, браузеры или операционные системы не имеют никакого влияния на это, но проблема может быть уменьшена с помощью этой трюки довольно легко.
Линии, которые вы видите, называются banding. Chrome в Win10 dithers градиенты, FF - нет. Это зависит от браузера.
Некоторые информационные ссылки, связанные с этим вопросом:
Без использования изображения в качестве градиента это невозможно решить, насколько я знаю. Возможно, FireFox уменьшит градиенты в будущей версии.