css - Gradient ends are blurry when using pixel measurements -


i'm using background-image: linear-gradient css property create multiple color strips site background.
gradient stops defined percentage, needed pixels in site, managed change pixels using method lea verou used in patterns problem end of each color bit blurry. in firefox it's less noticeable, in chrome it's noticeable.
there way handle it?
noticed when change 'deg' 180 45 ends great. unfortunately need stripes horizontal :)

my code: http://cssdesk.com/c6mgm

almost year later , run same bug in chrome v36. produced work around here: http://codepen.io/davidgailey/pen/ncrkb

or here if prefer: https://gist.github.com/davidgailey/8fc1bd1a09747429a3ad

the work around uses background-size, background-position, , linear gradients.

background-size: 100% 150px, 100% 150px; background-position: 0 0, 0 bottom; background-image: linear-gradient(#000,#000), linear-gradient(green, green); 

viola! nice crisp horizontal stripes. use work more future-friendly.

i hope bug fixed in mean time, feel free use pen start.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -