Chrome displays linear-gradient with choppy rendering

Question

Chrome displays linear-gradient with choppy rendering

I am attempting to enhance a page by adding a ribbon using CSS3 linear-gradients, but I have noticed that the way Chrome renders it is not as attractive as Firefox or IE. The color stops in Chrome appear pixelated, and unfortunately using vendor prefixed properties does not seem to solve the issue.

#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>

For the source code, please visit http://jsfiddle.net/xyFXx/2/

Is there a solution to improve the quality of rendering in Chrome?

css google-chrome linear-gradients

Answer 1

Answer №1

Although this question is quite old, I wanted to share some insight in case there are still people seeking answers.

If you're not worried about compatibility with Internet Explorer versions older than 9, using the transform:rotate property could result in better-rendered outcomes (especially when dealing with transparent angled gradients that might appear choppy or have gaps at gradient junctions).

You can achieve this by utilizing two rotated divs, or by employing a single div with an associated pseudo element. Below is the CSS code:

.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);
}

Check out the demo on JSFiddle: http://jsfiddle.net/brianhewitt1/m4KBC/

Answer 2

Although this question is quite old, I wanted to share some insight in case there are still people seeking answers.

If you're not worried about compatibility with Internet Explorer versions older than 9, using the transform:rotate property could result in better-rendered outcomes (especially when dealing with transparent angled gradients that might appear choppy or have gaps at gradient junctions).

You can achieve this by utilizing two rotated divs, or by employing a single div with an associated pseudo element. Below is the CSS code:

.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);
}

Check out the demo on JSFiddle: http://jsfiddle.net/brianhewitt1/m4KBC/

Chrome displays linear-gradient with choppy rendering

Answer №1

Similar questions

Enhancing Image Quality in Internet Explorer 10

One particular item in the list does not conform to the same formatting as the others

Utilize Python to Retrieve Text from Chrome Task Manager Programmatically Without the Need for Chromium

The animation feature in Angular JS seems to be malfunctioning

What causes IE11 to sporadically run inappropriate media queries?

The range slider initiates with the first alphabet

When I incorporate a gradient, the background of my Bootstrap button flickers when clicked

Media query causing CSS display:none to malfunction

Issues with padding and margin not displaying correctly at different screen sizes

What techniques can be used to create logos that adapt and transform seamlessly as the screen size varies?

Different CSS methods

Is there a way to set a background image in a section without being affected

Issue with alignment of inline elements

What methods does DevTools offer for identifying the font used in an SVG?

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

Select Additional Component in Empty Area (Using Angular.js with HTML, JS, CSS)

Bootstrap 3 Full-Width Responsive Image Overlapping

Themes in Next.js with a splash of color

Incorporate a Fadein effect into the current CSS for mouseover link interaction

Chrome is experiencing compatibility issues with Datatable