Scrolls to wrong position

Created on 13 February 2023, over 1 year ago
Updated 14 June 2024, 12 days ago

Problem/Motivation

When you open a block form with a media field, clicking "add media" opens the media library. A scroll to position is performed at this stage, causing the dialog to jump to the bottom of the screen.

Steps to reproduce

- Make a block you can add to your layout with a media field.
- Setup media library
- Click "Add media", media browser opens inside the iframe as a modal.
- The iframe now jumps to the bottom of the screen.

Proposed resolution

Fix scroll to position when opening media library.
Expecting iframe to stay at same position.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Needs review

Version

1.3

Component

User interface

Created by

πŸ‡§πŸ‡ͺBelgium kriboogh

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @kriboogh
  • πŸ‡§πŸ‡ͺBelgium kriboogh

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

  • πŸ‡¬πŸ‡§United Kingdom alistairmc

    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?

  • πŸ‡¨πŸ‡΄Colombia hduran

    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

  • πŸ‡ΊπŸ‡ΈUnited States redbrickone

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

  • πŸ‡ΊπŸ‡ΈUnited States redbrickone

    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

  • πŸ‡ΊπŸ‡ΈUnited States redbrickone

    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.

  • Status changed to Needs review 12 days ago
  • πŸ‡§πŸ‡ͺBelgium matthiasm11

    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 .

Production build 0.69.0 2024