Chrome renders linear-gradient very choppy

StackOverflow https://stackoverflow.com/questions/21798628

Вопрос

I'm trying to add a ribbon to a page using CSS3 linear-gradients, but the rendering in Chrome looks a lot less pleasant than its Firefox or IE alternative. The color stops in Chrome look very pixelated, but using vendor prefixed properties doesn't work as they don't allow specifying a degree.

#extradiv1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 121px;
  height: 71px;
  background: url(../img/ribbon.png);
  background: linear-gradient(30deg,
      transparent 61px,
      rgb(255, 204, 51) 61px,
      rgb(255, 204, 51) 76px,
      rgb(22, 22, 22) 76px,
      rgb(22, 22, 22) 91px,
      transparent 91px
  );
}

<html>
  <body>
    <div id="extradiv1"></div>
  </body>
</html>

Source code can also be found at http://jsfiddle.net/xyFXx/2/

Is there any way to solve this choppy rendering in Chrome?

Это было полезно?

Решение

This is a rather old question, but I thought I'd chip in in case anyone is still looking for answers.

If you're not concerned about IE older than 9, transform:rotate should yield better-rendered results (transparent angled gradients can indeed get choppy or get gaps at gradient joins).

You could do this with two rotated divs, or with a single div and associated pseudo element. Here's the CSS:

.rotatedDiv {
    position: absolute;
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
}

#extradiv1 {
    top: 20px;
    right: -30px;
    width: 200px;
    height: 20px;
    background: rgb(255,204,51);
}

#extradiv2 {
    position: absolute;
    top: 0;
    right: -20px;
    width: 170px;
    height: 20px;
    background: rgb(22,22,22);
}

Fiddle: http://jsfiddle.net/brianhewitt1/m4KBC/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top