I’m working on a big project and I used transform before only few times, so I don’t have too much experience. This time the client has many requests regarding the effects.
I have an #item, inside it there’s a button and a transparent div. On hover the opacity changes to 0.8 on the transparent div, and the button appears with transform, from the top. The problem is when I hover on the div, the button appears but after few ms you can see the button size increase and the text moves few pixels. (Firefox 42.0 – OSX)
I tried few solutions to fix it, but no luck, I really don’t know why is it happening. (-webkit-font-smoothing: antialiased;)
I’m lucky, because this time I reproduced it in a single file, and I don’t need to copy the 100kb css. :)
The code is really simple. I really appreciate that if you can give me some guidelines, tutorials, or a solution to fix it.
http://codepen.io/rolandr/pen/NGeOjv
