CSS Gradient Glitch

[MentalGear]

Hi there, First let me say, that this is an awesome project. I think this is going to become the go to framework for Elm as bootstrap is for css / js.

Issue: Now, here's the bug I came across on Safari on macOS. The "fade-out" gradient in the "Choser" Elements has a fade to dark instead of white.

Reason: The "transparent" keyword. Only Safari & FF seems to use the right w3 standard which is, rgba( 0,0,0,0), all the other browsers use 255,255,255

Proposed fix: To standardize the right gradient across all browsers, I would suggest using rgba(255.255.255.0) instead of the transparent keyword in all CSS.

Any comments ? Keep up the good work !

[gdotdesign]

Hey, yes you are right abpit using the rgba value (I keep making this mistake from time to time). Care to make a pr? :wink:

[MentalGear]

Sure, but it seems like my git client has an authentication error when trying to make a PR. However, as this is the only line I changed, I can also show it manually here:

in Properties.elm line 175 transparent : String transparent = "rgba(255,255,255,0)"

Set transparent CSS value to rgba(255,255,255,0) Description: The “transparent” css keyword is interpreted by different browsers either as rgba(255,255,255,0) or rgba(0,0,0,0). Therefore it is the best to set the value explicitly. Although the w3 standard seems to be rgba(0,0,0,0), this gives an unwanted black tone on certain browsers, especially when used within gradients (Safari). Therefore, we set it to rgba(255,255,255,0) which should deliver the expected cross-browser result.

Note: You might want to check this though, as I'm quite the beginner when it comes to Elm.