The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Shifting/jumping on an element after transform

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #234883

    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.



    I’m pretty sure it’s a Firefox bug :/

    If you’re happy to use Flexbox, you could centrally position the button using that, which got rid of the problem for me:

    Hope that helps!


Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.