[BUG] Having a Preview Tab Crashes Safari when Dragging

luxlogica commented 4 years ago

DESCRIPTION

In Safari, when we drag blocks inside the builder field (to sort/re-order them), if the field has blocks with previews, it crashes the page - sometimes forcing the page to reload automatically, sometimes with an ugly warning to the user.

This only happens if the blocks have previews. If the builder field uses only blocks without previews, dragging works as expected.

STEPS TO REPRODUCE

Setup a new, plainkit installation of Kirby:

composer create-project getkirby/plainkit builder-test
cd builder-test

Install Kirby Builder:

composer require timoetting/kirby-builder

Create a 'builder-test.php' file in your 'snippets' folder, with the following content:
```
<p><?= $data->content()->html() ?></p>
```

Create a 'builder-test.yml' page blueprint file, with the following content:

title: Kirby Builder Test
columns:
left:
width: 2/3
sections:
  test:
    type: fields
    fields:
      buildertest:
        type: builder
        label: Kirby Builder Test
        fieldsets:
          simpletext:
            name: Text
            label: Simple Text Field
            fields:
              content:
                type: text
                label: Text
            preview:
              snippet: builder-test

Using Safari, Log into the panel, and create a new page using the 'Kirby Builder Test' template.
Populate the page by adding 3 or 4 blocks to the builder field there.
Drag one of the blocks up/down to a different position, to try and re-order them.

WHAT HAPPENS

Safari will either flash/refresh the entire page - and the blocks will be where they were originally - or it will seem unable to render the page, and will present an ugly warning.

WHAT WAS EXPECTED

We should be able to re-order the blocks normally by dragging - as we can do in Firefox.

WORKAROUND

If we comment out the 'preview' section of the blueprint - disabling the previews - the field works as expected, and we are able to re-order blocks by dragging, without crashing.

VERSIONS

Kirby - 3.3.1 Kirby Builder - 2.0.13 Safari - 13.0.3

bertwillekens commented 4 years ago

I have the same issue!

Seems like the content of the preview iframe is rewritten too many times while dragging, Safari can't keep up.

When commenting out the following line, the problem seems to be gone. In BuilderPreview.vue, mounted(): this.$root.$on("blockMoved", this.updateFrameIfEmpty); This will stop the preview from being updated during/after drag events.

Not sure if it will break something else though.

Maybe throttling the updateContent() method might be a better solution.

exotexot commented 3 years ago

Having the same issue in Safari 14.

@bertwillekens could your create a PR and hopefully have this merged in the next release?

TimOetting commented 2 years ago

Closing this issue because this plugin will no longer be maintained, as its main functionality can be replaced by Kirby's built-in Blocks Field and Layout Field.

TimOetting / kirby-builder