problem with drag animation in safari when rows of a table are dragged

[Ravikc]

Problem with drag animation in safari when rows of a table are dragged

Bug video recording (in safari)

Expected behavior (in chrome - works in IE also)

Information This is a bootstrap-vue table

Sortable JS is used as a custom vue directive on the bootstrap-vue table. I've also tried applying sortable JS on component mount, behavior remains the same.

<template>
  <b-table
    v-sortable="sortableOptions"
    :items="getSortedForms"
    :fields="columns"
    :tbody-tr-class="rowClass"
    primary-key="key"
    show-empty
  >
    <template v-slot:empty>
      <!-- some content here -->
    </template>

    <template v-if="getSortedForms.length > 0" v-slot:head(selectFormAction)>
      <!-- check-box HTML here -->
    </template>
    <template v-slot:cell(col1)="form">
      <div :id="form.value.Key">
        <!-- check-box HTML here -->
      </div>
    </template>
    <template v-slot:cell(col2)="formItem">
      <!-- this is a custom component -->
      <form-display :formDTO="formItem.value" />
    </template>
    <template v-slot:cell(col3)="formStatusItem">
        <!-- some text here -->
      </div>
    </template>
    <template v-slot:cell(col4)="actionItem">
      <div>
        <!-- this is a custom component -->
        <form-progress-bar />
      </div>
    </template>
    <template v-slot:cell(col5)="utilityItem">
      <div class="utilitySet">
        <div
          v-for="(utility, id) in getSomeList()"
          :key="id"
        >
          <FormUtility :form="utilityItem.value.formDTO"></FormUtility>
        </div>     
      </div>
    </template>
  </b-table>
</template>

<script>
import { BTable } from "bootstrap-vue";
export default {
  name: "FormsList",
  directives: {
    sortable: {
      bind(el, binding, vnode) {
        const table = el;       
        Sortable.create(table.querySelector("tbody"), {});
      },
    },
  },
  components: {
    BTable,
  },
  data() {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
};

Additional context The problem seems to be only the animation UI. Drag and drop functionality works fine in Safari also.

All the columns of the bootstrap-vue table are custom vue components (implemented using the slot functionality).

[waynevanson]

Can you please put this in a codesandbox or somehting similar so we can reproduce this during tests.

[waynevanson]

In Safari when you do the drag, it works as expected? So is the bug just the visual ghost element?

[Ravikc]

In Safari when you do the drag, it works as expected? So is the bug just the visual ghost element?

Yes, visual ghost element is the bug.

[kessl]

The ghost elements seem to no longer be present in Safari 15.5.

[zepfietje]

I'm still able to reproduce the issue in Safari 17.4.1.

[solilin]

I have the same problem. But there is an option called forceFallback, and it helps me. I set it to true if it’s a Safari browser, like this:

forceFallback: navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') <= -1