search

lavab / web

AngularJS web client of Lavaboom's email service
https://mail.lavaboom.com
38 stars 21 forks source link

Button primary bad UI/UX in Web-Kit/Blink engine #613

Closed kalicki closed 9 years ago

kalicki commented 9 years ago

Hey guys,

Web-Kit/Blink engine (Google Chrome, ...) has a bug in color rendering in the primary button, gets a gray instead of white, what happens is that people who have vision problems (such as color blindness) has difficulties in reading the button.

lavaboom

My sugestion is remove:
-webkit-text-fill-color: #cccbd0!important;

looks like this: lavaboom_fix

vviikk commented 9 years ago

I'm going to increase the font weight in buttons rather than use a vendor prefix. will let you know when to check. good call. O also saw this problem.

On Sat, 9 May 2015 at 06:48 Piotr Zduniak notifications@github.com wrote:

Assigned #613 https://github.com/lavab/web/issues/613 to @piggyslasher https://github.com/piggyslasher.

— Reply to this email directly or view it on GitHub https://github.com/lavab/web/issues/613#event-300685860.

kalicki commented 9 years ago

Basically they are the same, but -webkit-text-fill-color will take precedence over color if the two have different values.

Remove -webkit-text-fill-color. Change font-weight: 300 to 500

:+1:

vviikk commented 9 years ago

yup. we're refined all font sizing, especially for retina displays. Should be in the master soon.

vviikk commented 9 years ago

I think we should unify our font sizes. currently as the design needs this. but as the lighter font weights simply don't render well on darker backgrounds, I'm going to remove 100 and only use 300, 400, 500. ideally it would be nice to just load two weights.

kalicki commented 9 years ago

Actually you're right, you'd better sit down and plan with Design solutions using optimized fonts because loading more than 2 sources is pretty bad.

I've used https://github.com/caiguanhao/grunt-ziti to Grunt some time ago is quite interesting, I don't know if exists to Gulp, but he's an optimized in the sources fonts.

vviikk commented 9 years ago

will do. I want to change the font to embedded dataURI and load them in media queries. 400,500 for non-retina and 300,400 for retina. when time permits. closing for now. its on the development branch :) Thanks again for the input @kalicki

kalicki commented 9 years ago

Exchange at least the color, because it is not good yet

-webkit-text-fill-color: #fff;

It makes sense only in webkit engine use this button gray, flee layout