Gutenberg: The inline Inserter position jumps

Created on 11 Jun 2020  路  6Comments  路  Source: WordPress/gutenberg

Describe the bug
When hovering over the inserter between blocks, it jumps. At first I thought my animation was problematic when working on the hover delay and animation speed. Then, I looked a bit closer. It seems the Inserter is actually moving causing some serious jank.

To confirm this, I shortened the animation and delay to almost 0. It makes it really clear what is happening. You can see it in this gif:

2020-06-10 15 57 27

To reproduce

  1. Add a few paragraph blocks.
  2. Hover slowly right below where the inserter. It's hard to figure out unless you dramatically shorten the animation time found here to something like 0.01s. You might also remove this 80% bit here.

Expected behavior
I expect the inserter to not jump.

Editor version (please complete the following information):

  • WordPress version: 5.4.1
  • Gutenberg master

Desktop (please complete the following information):

  • OS: MacOS latest
  • Browser: Firefox latest
[Feature] Inserter [Type] Bug

All 6 comments

Let's get this bug squashed..:)

I've definitely seen this weirdness before, but I never dug into it to find out exactly what triggered it. Thanks for looking into it and creating this issue, @MichaelArestad!

I've done some refactoring in #20792 while fixing another bug. I'm not noticing any issues after that. Could you retest with master?

@ellatrix I tested on master and I'm still seeing it.

To reproduce:

  1. Create a new post/page
  2. add several paragraphs in a row
  3. Move your cursor over the inserter icon and move very slowly downward (very slow). It's not consistent so try between more than one paragraph.

Due to how difficult it is to reproduce this and the severity, I'm removing this from the 5.5 Must-Haves.

@youknowriad sounds good as long as we eventually figure it out. Keep up the good work!

Was this page helpful?
0 / 5 - 0 ratings