Rendering issue with repeating linear gradient in Chrome
up vote
1
down vote
favorite
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:
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.
css
google-chrome linear-gradients asked Nov 4 at 9:21
Martin Parkin
4,533925
add a comment |
up vote
1
down vote
favorite
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:
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.
css
google-chrome linear-gradients asked Nov 4 at 9:21
Martin Parkin
4,533925
your only way for Chrome is to avoid the same color stop ... so instead of using10px ... 10pxtry10px ... 11pxfor example
– Temani Afif
Nov 4 at 9:31
@TemaniAfif Thank you for that suggestion. I have tried that at varieties of stripe widths and sadly, although it reduces the jagged effect, it does not eliminate it.
– Martin Parkin
Nov 4 at 9:45
I think there is no way to eliminate it for Chrome ... by the way here is a similar question where I found a way to reduce it for repeating gradient: stackoverflow.com/questions/52111717/…
– Temani Afif
Nov 4 at 9:54
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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:
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.
css
google-chrome linear-gradients asked Nov 4 at 9:21
Martin Parkin
4,533925
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:
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.
css
google-chrome linear-gradients css
google-chrome linear-gradients asked Nov 4 at 9:21
Martin Parkin
4,533925
asked Nov 4 at 9:21
Martin Parkin
4,533925
asked Nov 4 at 9:21
Martin Parkin
4,533925
asked Nov 4 at 9:21
Martin Parkin
4,533925
asked Nov 4 at 9:21
Martin Parkin
4,533925
4,533925
your only way for Chrome is to avoid the same color stop ... so instead of using10px ... 10pxtry10px ... 11pxfor example
– Temani Afif
Nov 4 at 9:31
@TemaniAfif Thank you for that suggestion. I have tried that at varieties of stripe widths and sadly, although it reduces the jagged effect, it does not eliminate it.
– Martin Parkin
Nov 4 at 9:45
I think there is no way to eliminate it for Chrome ... by the way here is a similar question where I found a way to reduce it for repeating gradient: stackoverflow.com/questions/52111717/…
– Temani Afif
Nov 4 at 9:54
add a comment |
your only way for Chrome is to avoid the same color stop ... so instead of using10px ... 10pxtry10px ... 11pxfor example
– Temani Afif
Nov 4 at 9:31
@TemaniAfif Thank you for that suggestion. I have tried that at varieties of stripe widths and sadly, although it reduces the jagged effect, it does not eliminate it.
– Martin Parkin
Nov 4 at 9:45
I think there is no way to eliminate it for Chrome ... by the way here is a similar question where I found a way to reduce it for repeating gradient: stackoverflow.com/questions/52111717/…
– Temani Afif
Nov 4 at 9:54
your only way for Chrome is to avoid the same color stop ... so instead of using
10px ... 10px try 10px ... 11px for example– Temani Afif
Nov 4 at 9:31
your only way for Chrome is to avoid the same color stop ... so instead of using
10px ... 10px try 10px ... 11px for example– Temani Afif
Nov 4 at 9:31
@TemaniAfif Thank you for that suggestion. I have tried that at varieties of stripe widths and sadly, although it reduces the jagged effect, it does not eliminate it.
– Martin Parkin
Nov 4 at 9:45
@TemaniAfif Thank you for that suggestion. I have tried that at varieties of stripe widths and sadly, although it reduces the jagged effect, it does not eliminate it.
– Martin Parkin
Nov 4 at 9:45
I think there is no way to eliminate it for Chrome ... by the way here is a similar question where I found a way to reduce it for repeating gradient: stackoverflow.com/questions/52111717/…
– Temani Afif
Nov 4 at 9:54
I think there is no way to eliminate it for Chrome ... by the way here is a similar question where I found a way to reduce it for repeating gradient: stackoverflow.com/questions/52111717/…
– Temani Afif
Nov 4 at 9:54
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53139312%2frendering-issue-with-repeating-linear-gradient-in-chrome%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
your only way for Chrome is to avoid the same color stop ... so instead of using
10px ... 10pxtry10px ... 11pxfor example– Temani Afif
Nov 4 at 9:31
@TemaniAfif Thank you for that suggestion. I have tried that at varieties of stripe widths and sadly, although it reduces the jagged effect, it does not eliminate it.
– Martin Parkin
Nov 4 at 9:45
I think there is no way to eliminate it for Chrome ... by the way here is a similar question where I found a way to reduce it for repeating gradient: stackoverflow.com/questions/52111717/…
– Temani Afif
Nov 4 at 9:54