start color
Closed this issue · 4 comments
When no color is specified for 0deg (or 0%), the polyfill sets it to black, not to the color of the first color stop. http://codepen.io/gunnarbittersmann/pen/rVbzYo?editors=010
This is so odd. Cannot reproduce when pasting in a code area on the page. Can you?
Actually, even on codepen, if I select "red" and type "red" over it, it’s drawn correctly, which indicates it’s probably some kind of weird character issue…
@LeaVerou it's not a weird character issue. Actually, it's a reproducible issue. Also, it only happens on the first load apparently (live-editing doesn't reload the JS, right? maybe that's causing this?)
Try setting the color: yellow on the HTML element, save the pen, and then reload the page. You'll observe that the gradient starts from yellow instead of red.
The problem arises because the first time the gradient is generated for this style:
conic-gradient(at center, red 45deg, white 45deg, white 135deg, red 135deg, red 225deg, white 225deg, white 315deg, red 315deg
The colour stops at L34 are:
Array [ "at center", "red 45deg", "white 45deg", "white 135deg", "red 135deg", "red 225deg", "white 225deg", "white 315deg", "red 315deg" ]
The first one is obviously not a colour, but on passing through the _.ColorStop.colorToRGBA function, the colour is set as getComputedStyle(dummy).color, which, as it turns out, is the currently set text color. Since the default text color is black, you're seeing black as the starting gradient. On changing the default color to, say, blue, the gradient will start from blue.