Hover color change with slow transition

[Funkaholik]

Hey guys .. listen
i can’t understand why on hover off color changes imidiately
like so
i want white slowly turn into yellow back’n’forth but can’t make it so

[Shikkediel]

Hmm.. I suppose you mean with Chrome. Not working at all with IE and it’s actually fine with Firefox.

Can’t offer a solution though.

[Funkaholik]

How do you handle line-height difference in browsers?
Seems like Firefox&IE have a different line-height unlike Chrome
I’ve checked an reset.css and normalize.css doesn’t solve that problem.
Also what you use as auto-reload app for firefox
(it’s strange but all that i’ve tried telling the same thing not supported vers of browser .. and i have the latest one=))

[Shikkediel]

Don’t know what the context is but I’ve always found that setting a specific line-height makes for a pretty good cross browser experience.

What’s the auto-reload app for? I know Firefox is all new now, most previous addons don’t work anymore. But at least NoScript got released again…

[Funkaholik]

ohh man, i forgot that i have a & button tags that differs
right now trying to set line-height & padding to look the same when hover

You know auto-reload add-on that reloads the page in browser after you hit save in text-editor (Sublime etc)
for Firefox they all tends to not working at the moment.

[Shikkediel]

Buttons are weird… they don’t adhere to most inheritance and their box-sizing property is different by default. That first thing might be the issue here:

.theme-switch {
  line-height: inherit;
}

[Funkaholik]

But i don’t see line-height properitie in my stylin ???

[Shikkediel]

But ul has, which will be inherited by a but not by any button…

You probably wanna do a mobile reset too by the way:

button {
  padding: 0;
  border: 0;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
}

[Funkaholik]

ahh .. now i see but i still need padding if i want both el looks the same.
Do i still need -moz prefix? it’s a bit anoying because my autoprefixer sets all exept -moz & -opera

[Shikkediel]

You probably don’t need padding or outline in that list. I do see -moz-appearance getting recognised in Firefox so I’d recommend adding it, even though I’m not exactly sure how much of an impact it will have on the average mobile user. For that, the -webkit- prefix probably carries more weight. Here’s a full compatibility list:

https://caniuse.com/#search=Appearance

[Author]

Posts