(navigation layout). Safari (some browers) Layout Drag is not working.

I also noticed that I can drag the blocks in place on the left in the Navigation mode. Either right away, or after clicking 'Move' from the contextual links menu, I can only move things using the off canvas dialog that slides in from the right.

Firefox works as expected. Other layout builder pages also work as expected in Chrome, so it appears to be an issue on Chrome only.

Defining this as major and stable blocker.

Standardizing issue title.

Here's what I found so far in case someone else is looking at this, I debugged layout builder JS implementation and found that the onEnd event of the Sortable implementation isn't being called (layout-builder.js line 165) so after some searching and testing I ended up on this Sortable issue which is reporting something similar, some of the solutions suggested adding forceFallback: true to the Sortable call, I tried this and it started working on Chrome without issues. It seems to be related to a Chrome bug but I don't have a definitive solution yet.

Attaching video of drag & drop working after just adding forceFallback: true to layout-builder.js.

@javi-er yes. i got same result with
forceFallback: true. in core/modules/layout_builder/js/layout-builder.js:166

all works fine in latest chrome and safari

without this fix failure.

probably we need to ask for help layout builder team.

After digging through the HTML markup of the navigation and the styles, I found out that the all: revert; CSS property being applied at admin-reset-styles.pcss.css to both the draggable elements and the dropzone element is conflicting with Chrome DnD API and making it not to work, simply removing this property fixes the issue. ( related issue ✨ Reset theme css. Fixed )

However, there seems to be some other issues being caused by the navigation styles (and maybe JS?) while on the LB interface. See discussion here.

The optimal solution is to identify and separate the Navigation libraries between the core styles and everything else and while on the admin interface, and just include a library that applies the basic styling leaving out anything that's not strictly needed.

Here we need to disable all:revert in context of layout builder.
https://git.drupalcode.org/project/drupal/-/blob/HEAD/core/modules/navig...

It will happends in admin theme where it is predictable. So shouldn't be critical.

Removing Navigation stable blocker label. We had decided it didn't reach that threshold a little while back. This is reflected in the meta-issue 📌 New Toolbar Roadmap: Path to Beta & Stable Active .