CODEWITHSUNDEEP
cssgoogle-chromegradient
vahidseo
vahidseo

Reputation: 461

Repeating background gradient in Chrome

In this pen, the position of the repeating background gradient is animated. This makes Google Chrome render the background gradient wrong. It works fine in Mozilla Firefox.

How can I fix it?

For my body background gradient I used this:

background-image: repeating-linear-gradient(40deg, #d61e29 0px, #661011 40px);

and the animation is bg:

animation: bg 15s infinite linear;

Upvotes: 1

Views: 1057

Answers (1)

bryjohns
bryjohns

Reputation: 656

I believe it's related to this bug - https://code.google.com/p/chromium/issues/detail?id=162538. If you remove your setting the background size to 200% you see the gradient clears up somewhat. If you reduce it to 50% it becomes smooth. I think you're going to have to take another approach to the animated background. Also notice setting the angle to 0 gives smooth gradient.

Try giving a fixed background size, in effect tiling it, so that the tiles seem nicely. background-size: 100px 100px; not sure the exact size to get the seems right. Here is a code pen - http://codepen.io/anon/pen/vuFod;

background-size: 100px 100px
background-image: -webkit-repeating-linear-gradient(45deg, #d61e29 0px, #661011 71px);

Upvotes: 2

Related Questions