Using px in a linear-gradient fails to render correctly.

[valentinradu]

Hi,

When using px for linear gradients I get white backgrounds instead of the expected behaviour. Looking into the source code, it seems that the PXGradient gradient method is not even called for this situation. Could it be a parsing problem? Here is my CSS:

background-image:linear-gradient(to bottom, #c7c8cd 0px, #eaeaec 20px, #abaeb3 21px, #f9f9fa 30px, #ffffff 80px);

(Also tried background and background-color with no success)

[pcolton]

Try not using 'to bottom' that isn't supported , and Freestyle only supports percentages right now and not pixels. For example:

`

button {

color: black;
background-color: linear-gradient(#c7c8cd 0%, #eaeaec 20%, #abaeb3 50%, #f9f9fa 52%, #ffffff 100%);

} `

[valentinradu]

Hi Paul,

Yes, I know that % would work, however, in my specific scenario I need a fixed size background. Thanks for confirming this. Will have a look later this week to see if I can add support for px units (I'm guessing there's a catch tho, otherwise would have been probably implemented already)

[pcolton]

If you specify the size with background-size, then percentages get you very close. I'll have someone chime in on what it takes to support px.

[thelonious]

Changes will need to be made in the following classes:

PXGradient.m PXValueParser.m, specifically the linearGradient and radialGradient methods

Right now, the offset and color for each stop are stored in parallel arrays in PXGradient. Really, Pixate needs a new type to contain those values. That will avoid all sorts of edge cases. So, I would suggest creating something like PXGradientStop and defining properties for color, offset, and position. then -[PXGradient gradient] can process those stops, taking into account offset vs position. That gradient method will need the bbox of the shape being filled because each position will need to be converted to a percentage. FWIW, there are some good details on how these color stops are supposed to be processed here: http://www.w3.org/TR/css3-images/#color-stop-syntax

-[PXValueParser linearGradient] will need to create instances of PXGradientStop. Where it checks for PXSS_PERCENTAGE, it should also check for PXSS_LENGTH. Based on which token type you match, you'll know which PXGradientStop property to set.

HTH

[valentinradu]

Thank you. Will have a look later this week and report back.