CODEWITHSUNDEEP
javascriptcssgoogle-chromesafariwebkit
patrickhuang94
patrickhuang94

Reputation: 2113

Font color discrepancy between desktop Safari/Chrome and mobile Safari

I'm testing cross compatibility between Safari and Chrome on both desktop and mobile. I've set something relatively simple for font color.

/* JS inline style...something along the lines of this */
const style = {
    color: 'black',
    WebkitTextFillColor: 'black',
}

<input style={style} value={1}/>

The text shows up black for desktop Chrome and Safari. It shows up as gray on mobile Chrome and Safari though. What's up with that?

Upvotes: 1

Views: 117

Answers (1)

jrn
jrn

Reputation: 2800

I came accross something similar and this is what worked for me:

input{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}

I think it has something to do with WebkitTextFillColor.

See this issue, too.

Upvotes: 1

Related Questions