jQuery UI Draggable FireFox issue

Question

I'm trying to make a draggable element with jQuery UI and everything works just fine except firefox. - element just jumps arround when i'm trying to drag it or revert:

$(".dragable").draggable({
  axis: "y",
  revert: true
});

.dragable {
  width: 50px;
  height: 50px;
  background: #000000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="dragable"></div>

It works perfectly in all other browsers except FireFox.

Answer 1

the reason was the margin: auto, one workaround is to wrap the element in a div to center it:

$(".dragable").draggable({
  axis: "y",
  revert: true
});

.center {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.dragable {
  background: #000000;
  width: 100%;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="center">
  <div class="dragable"></div>
</div>