CSS transition, position keeps moving on hover

Question

I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.

It's like it moves back, then forwards then back again?

This appears to only happen in Firefox.

JSFiddle

Answer 1

Found the problem. Your span is inline, and giving it position: relative caused the issue.

Simply change to inline-block and you're good to go:

.genericBtn span {
  display: inline-block;
  position: relative;
}