CODEWITHSUNDEEP
cssgoogle-chromelinear-gradients
Martin
Martin

Reputation: 16433

Rendering issue with repeating linear gradient in Chrome

I am experiencing an error with a repeating linear gradient that is affecting the quality of rendering in Chrome. They look perfect in FireFox.

I have elements that have a 60 degree stripe. In FireFox, the edges of the stripe are very smooth and look nice. However, in Chrome, the edges of each stripe are jagged and look somewhat unimpressive compared to the rendering in 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%;

Take a look at some comparison images at 1x and 5x zoom:

1x Zoom comparison

5x Zoom comparison

In the 5x zoom image, you can see that in FireFox the stripe edges are anti-aliased whereas the anti-aliasing is either not present or very poor in Chrome.

I have Fiddle showing the effect, which is very distinctive when running side-by-side in FireFox and Chrome: Fiddle

What have I already tried?

I am aware of and have attempted the recommendations from prior questions and the web, including adding various CSS tricks to force 3d-acceleration (i.e. translate(0), perspective: 1000, etc.), and transform-style: preserve-3d.

I am also aware that using a 45 degree angle is smooth in Chrome. However, because of the shape of the rectangles that I am using I would like to use a 60 degree angle if possible.

What result would I like?

I would really love to see the stripes rendered smoothly in Chrome as they are in FireFox.

I simply have no other ideas about how to achieve this.

Upvotes: 2

Views: 1764

Answers (2)

Lucas Kellner
Lucas Kellner

Reputation: 441

I had the same issue. I solved it without SVG by adding in a single pixel of gradient when the color changes. Example:

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

enter image description here

Upvotes: 5

Martin
Martin

Reputation: 16433

After accepting the poor quality of this for several months, I finally found a solution to this problem that involves the use of an SVG instead of the repeating-linear-gradiant.

I created a SVG containing a stripe and then embedded this inside the stripe span:

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>

The width of the .stripe element is set to 120% of the parent in order to allow the right-side of the stripe to animate correctly inside the container.

The results are clearly visible here:

5x Zoom of resulting stripe

You can see that although Chrome and FireFox are rendering the stripe slightly differently, Chrome is antialiasing it correctly so it looks much smoother than it did before.

There is also a Fiddle that shows this working.

Upvotes: 3

Related Questions