jQuery перетаскиваемый и изменяемый размер комбо прикрепляет элемент к стороне контейнера в Safari

Question

Я использую Resizable и Draggable для элемента таблицы, который мне нужно иметь возможность перемещать, но также необходимо, чтобы он был ограничен другим элементом таблицы.

Это прекрасно работает в Chrome, но яобнаружив, что в Safari, когда я изменяю размер элемента и затем перетаскиваю его, он фиксируется на левой стороне контейнера, и я не могу вырвать его свободно. Есть ли настройка, которую я могу использовать, чтобы решить эту проблему? См. Пример в Safari с этим JSFiddle.

$('#floater').resizable({
    handles: "n, e, s, w, ne, se, sw, nw",
    containment: "parent"


  });


 $('#floater').draggable({
    axis: "y,x",
    containment: "#video-area"

});

https://jsfiddle.net/xstatic/scna5r3v/52/

Answer 1

Установите для свойства отображения ".inner-box", ".video-area" и "#floater" значение "inline-block". https://jsfiddle.net/a1utnv6h/.

.inner-box {
  position: absolute;
  display:inline-block;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: white;
}

#video-area {
  height:100%;
  width:100%;
  background:red;
  table-layout: fixed !important;
  display:inline-block;
}

#floater {
  position:absolute;
  display:inline-block;
  width:98%;
  background:white;
  color:black;
  margin-left: auto !important;
  margin-right: auto !important;
  cursor: move;
  padding:10px;
  top:20px;
}