Scrolls to wrong position

Seems to be a safari only problem, chrome is ok.

I am seeing a similar issue when adding a new block the screen scrolls the modal out of view.

You can see the behaviour in the attached video.

Should I raise a new bug for this or can it be resolved with this bug?

I have the same issue when creating a new section on the Layout Builder on Chrome, Firefox is fine my site is D10.2.6 and I'm also missing the x button

I'm also experiencing this issue on a site after upgrading to Drupal 10.2.6. I am experiencing this in Chrome.

I was hoping a patch from this issue would fix it but didn't have such luck: https://www.drupal.org/project/drupal/issues/3209129#comment-15605759 🐛 Scrolling problems when adding a block via layout builder Needs work

FYI I reverted back to drupal 10.2.4 and the issue still remains. I have updated these modules as well. Unsure which one introduced the issue though.

Better Exposed Filters 6.0.3 → 6.0.5
Ckeditor 5 Paste Filter 1.0.0 → 1.0.1
Config Ignore 8.x-3.2 → 8.x-3.3
Config Split 2.0.0 → 2.0.1
Diff 8.x-1.1 → 8.x-1.3
Focal Point 2.0.3 → 2.1.0
Gin Login 2.0.3 → 2.0.4
Linkit 6.1.3 → 6.1.4
Password Policy 4.0.0 → 4.0.1
Scheduler 2.0.1 → 2.0.3
Simple XML sitemap 4.1.8 → 4.1.9
SVG Image Field 2.3.1 → 2.3.2
Token 8.x-1.13 → 8.x-1.14
WebP 8.x-1.0-rc1 → 8.x-1.0-rc2
Gin Admin Theme 8.x-3.0-rc9 → 8.x-3.0-rc10
Drupal Core - 10.2.4 → 10.2.6

Upon further investigation of the module, I've narrowed it down to possibly being this code here as the culprit: https://git.drupalcode.org/project/layout_builder_iframe_modal/-/blob/1....

// Stores the last scroll position before rebuild happened.
  Drupal.AjaxCommands.prototype.openIframe._scrollPosition = 0

  /**
   * Scrolls to the position before the layout rebuild was triggered.
   *
   * The scroll only happens if the delta between then and now is above a
   * certain threshold. This prevents unnecessary scrolling.
   */
  Drupal.AjaxCommands.prototype.scrollToBlock = function () {
    var scrollY = Drupal.AjaxCommands.prototype.openIframe._scrollPosition
    if (scrollY) {
      window.setTimeout(function() {
        if (Math.abs(window.scrollY - scrollY) > 300) {
          window.scrollTo(0, scrollY)
        }
        Drupal.AjaxCommands.prototype.openIframe._scrollPosition = 0
      }, 200)
    }
  };

I'm running out of time looking into this for this week. I may be able to dig in more next if someone else doesn't find a solution by then.

Changed the dialog options to match the same options set in layout_builder_browser_link_alter(). This will prevent the page from scrolling/jumping. The height option was the main issue.

After the dialog is opened, the size will be recalculated nevertheless, see 🐛 Modal height(s) are extremely large Active .

I just tested it to be working fine. No jumps. I wonder when the next release will be.

Patch #8 fixed the automatic scrolling to the top, out of the screen, when you were opening an iframe after having closed one, thanks @matthiasm11!

+2

Thanks works great, using the patch in #8 for now.

Small nitpick: I noticed on mobile the 80% width makes small edits, on a phone for example, a bit hard.

I'll try to find a solution for this when I can find the time.

Thanks!

Patch #8 committed

Automatically closed - issue fixed for 2 weeks with no activity.