Как сделать градиенты в Chrome гладким?

Вот как это выглядит в Chrome:Как сделать градиенты в Chrome гладким?

и это скриншот из Firefox:

Как видно из скриншотов, что границы градиента неровные в Chrome , Как я могу сделать их гладкими?

Вот мой градиент в случае, если имеет значение:

background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red), 
        linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red); 
background-size: 60px 60px; 
background-position:0 0, 30px 30px;

EDIT:

Изменение фонового размера на 40px делает градиент гладкой, но я хочу, чтобы быть гладкой на всех размерах.

Дайте мне знать, если мне нужно предоставить дополнительный код. Благодарю.

источник

2016-03-09 SanJeet Singh

Может предоставить нам с HTML и как вы накладыванием треугольников над градиентом, чтобы мы могли видеть, как его структуру? – somethinghere

Я не думаю, что HTML имеет значение здесь, потому что просто установка свойства на 'body' будет выдавать результат. @SanJeetSingh: Кстати, что такое 'background-size', который вы используете? Я попробовал его с 40px 40px в Chrome, и он выпускает тот же результат, что и Firefox. – Harry

@ Harry Yup, градиент был гладким с 40px. Я использую 60 px. В идеале я хотел бы, чтобы градиент был гладким во всех измерениях. –

Причина:

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

Для этого (или испытания и ошибки) не требуется много экспериментов, почти всегда достаточно 1 или 2% пробела.

Обход:

Изменение точки цвета остановки, чтобы произвести более плавное изменение цвета вместо того, чтобы дать ему жесткий упор, кажется, помогает.

body { 
 
    background-image: linear-gradient(45deg, red 24%, transparent 26%, transparent 74%, red 76%, red), linear-gradient(-45deg, red 24%, transparent 26%, transparent 74%, red 76%, red); 
 
    background-size: 60px 60px; 
 
    background-position: 0 0, 30px 30px; 
 
}

источник

2016-03-09 17:48:57 Harry

Хороший @ Харри! Есть много причин, потому что такие вещи производятся. Еще одна заметка о мозге. Спасибо! –

Да @ MarcosPérezGude. Я помню, что раньше встречал опцию «обратная видимость», но по какой-то причине это не работало. Так что да, одна проблема и разные возможные обходные пути, которые работают только для некоторых случаев :( – Harry

Попробуйте это на элементы градиента в.

transform: translateZ(0);

Разглаживает градиент. Смотри ниже.

td.normal { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-image: linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red), 
 
    linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red); 
 
} 
 

 
td.smooth { 
 
    transform: translateZ(0); 
 
}

<table> 
 
<tr> 
 
    <td class="normal"></td> 
 
    <td class="normal"></td> 
 
    <td class="normal smooth"></td> 
 
    <td class="normal smooth"></td> 
 
</tr> 
 
</table>

источник

2016-03-09 17:13:01 Roy

Он производится ошибкой в хроме, которая относится к такому роду фоны как 3D-элемент. Вы можете избежать написания границы (она преобразует в плоскость элемент) или с этим свойством.

transform-style: preserve-3d;

ИЛИ

-webkit-backface-visibility: hidden; /* Webkit specifically! */

Границу решение

border: 1px solid #fff;

Подробнее об этой ошибке:

http://adrianroselli.com/2014/10/linear-gradient-problems-in-chrome.html

источник

2016-03-09 17:14:35

, к сожалению, ни одно из этих решений не работало. –

Вы уверены? Можете ли вы создать http://jsfiddle.net или stacksnippet, чтобы показать проблему? –

Подождите, пока я создаю скрипку :). –

Попробуйте добавить backface-visibility: hidden

Это происходит иногда, когда мы просим браузер перекосить изображение.

источник

2016-03-09 17:15:44

Как сделать градиенты в Chrome гладким?

ответ

Смежные вопросы