Проблема рендеринга с повторяющимся линейным градиентом в Chrome

Question

Я испытываю ошибку с повторяющимся линейным градиентом, которая влияет на качество рендеринга в Chrome. Они отлично смотрятся в FireFox.

У меня есть элементы с полосой 60 градусов. В FireFox края полосы очень гладкие и выглядят красиво. Однако в Chrome края каждой полосы неровные и выглядят несколько не впечатляюще по сравнению с рендерингом в FireFox.

background: repeating-linear-gradient(-60deg, rgba(231, 117, 29, 1.0), rgba(231, 117, 29, 1.0) 10px,rgba(236, 144, 74,1.0) 10px, rgba(236, 144, 74, 1.0) 20px) repeat scroll 0% 0% / 23px 100%;

Посмотрите на несколько сравнительных изображений с 1-кратным и 5-кратным увеличением:

На изображении с 5-кратным увеличением вы можете видеть, что в FireFox края полос сглаживаются, тогда как сглаживание либо отсутствует, либо очень слабое в Chrome.

У меня есть Fiddle, показывающий эффект, который очень характерен при параллельном запуске в FireFox и Chrome: Fiddle

Что я уже пробовал?

Я знаю и пытался выполнить рекомендации предыдущих вопросов и в Интернете, включая добавление различных уловок CSS для форсирования 3d-ускорения (т. Е. translate(0), perspective: 1000 и т. Д.) И transform-style: preserve-3d. * 1031. *

Мне также известно, что использование угла 45 градусов в Chrome является плавным. Однако из-за формы прямоугольников, которые я использую, я хотел бы использовать угол 60 градусов, если это возможно.

Какой результат я бы хотел?

Мне бы очень хотелось, чтобы полосы плавно отображались в Chrome, как и в FireFox.

У меня просто нет других идей о том, как этого добиться.

Answer 1

У меня была такая же проблема. Я решил это без SVG, добавив один пиксель градиента при изменении цвета. Пример:

background: repeating-linear-gradient(-60deg, white 0, blue 1px, blue 10px, white 11px, white 20px);

Answer 2

Приняв низкое качество этого в течение нескольких месяцев, я наконец нашел решение этой проблемы, которое включает использование SVG вместо repeating-linear-gradiant.

Я создал SVG, содержащий полосу, а затем встроил ее в промежуток полосы:

body {
  background: #20262E;
}

.slide {
  background-color: rgba(231, 117, 29, 1.0);
  border: 1px solid black;
  height: 80px;
  overflow: hidden;
}

.stripe {
  width: 120%;
  height: 100%;
  display: inline-block;
}

.stripe svg {
  animation: slide 1s linear infinite;
  color: rgba(236, 144, 74,1.0);
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

<div class="slide">
  <span class="stripe">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <pattern id="stripe" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(60)">
          <line x1="0" y="0" x2="0" y2="20" stroke="currentColor" stroke-width="20" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#stripe)" opacity="1" />
    </svg>
  </span>
</div>

Ширина элемента .stripe установлена ​​равной 120% родительского элемента, чтобы позволить правой стороне полосы правильно анимироваться внутри контейнера.

Результаты хорошо видны здесь:

Вы можете видеть, что хотя Chrome и FireFox визуализируют полосу немного по-разному, Chrome корректно сглаживает ее, поэтому она выглядит намного более гладкой, чем раньше.

Существует также Fiddle , который показывает эту работу.