Overview

When loading a long page (containing many components) in Firefox, the content in the preview canvas is cut off at both the top and bottom edges of the screen. Users cannot scroll up or down to view the hidden content. However, if the user zooms in or out on the page, the content displays correctly and becomes scrollable.

Proposed resolution

User interface changes

CommentFileSizeAuthor
#11 Screen Recording 2025-08-12 at 1.12.12 PM.mov38.69 MBmayur-sose
#4 Screenshot from 2025-07-31 19-18-13.png201.24 KBvasantha deepika
#4 Screenshot from 2025-07-31 19-15-49.png179.03 KBvasantha deepika
image.png140.72 KBmayur-sose

Issue fork experience_builder-3538506

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mayur-sose created an issue. See original summary.

vasantha deepika’s picture

vasantha deepika commented
Assigned: Unassigned » vasantha deepika

Let me check this issue.

vasantha deepika opened merge request !1396

vasantha deepika’s picture

vasantha deepika commented
Assigned: vasantha deepika » Unassigned
Status: Active » Needs review
StatusFileSize
new Screenshot from 2025-07-31 19-15-49.png179.03 KB
new Screenshot from 2025-07-31 19-18-13.png201.24 KB

Fixed the content breaking issue on the canvas in Firefox.
Created a merge request with the fix and attached screenshots for reference.

Before Fix:
before fix

After Fix:
After fix

jessebaker made their first commit to this issue’s fork.

jessebaker opened merge request !1402

jessebaker’s picture

jessebaker commented
Component: … to be triaged » User interface

bnjmnm changed the visibility of the branch 3538506-preview-canvas-content to hidden.

  • bnjmnm committed ddc94d58 on 1.x authored by jessebaker 
    Issue #3538506 by vasantha deepika, jessebaker: Preview Canvas Content...
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Fixed

Looks good, merged!

mayur-sose’s picture

mayur-sose commented
Assigned: Unassigned » jessebaker
Status: Fixed » Needs work
StatusFileSize
new Screen Recording 2025-08-12 at 1.12.12 PM.mov38.69 MB

@jessebaker @bnjmnm I have tested the changes on the 1.x branch and am still able to reproduce this issue. Please see the attached video for reference.

jessebaker’s picture

jessebaker commented

The issue found by @mayur-sose is slightly different from the one fixed in the original MR but actually probably more of an actual problem.

The initial MR fixed the canvas not increasing in size to accommodate the iframe on page load.

The second issue found is that, once the canvas is scaled (e.g zoomed to 80%), it does not increase in height/width to accommodate the iframe when the iframe changes size. It only recalculates when the scale is changed.

Adding a resize observer should capture this scenario.

jessebaker opened merge request !1437

jessebaker’s picture

jessebaker commented
Assigned: jessebaker » Unassigned
Status: Needs work » Needs review

MR !1437 has a fix for the issue found in #11.

It's also worth mentioning that the issue found in #11 is not only happening in Firefox.

Steps to reproduce this:

  1. Starting from a new xb_page
  2. Scale the canvas to 120%
  3. Add several components to the page such that the page becomes significantly taller than your browser window.
  4. There should always be space above and below the viewport of about ~80% of the height of your browser.

  • bnjmnm committed a4254bcd on 1.x authored by jessebaker 
    Issue #3538506 by jessebaker, bnjmnm, mayur-sose: Preview Canvas Content...
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Fixed

I could only reproduce #14 in Firefox though it mentioned it occurred in all browsers. The MR does fix it, and the approach makes sense, so this is going in.

mayur-sose’s picture

mayur-sose commented

Verified changes and those are working as expected :

ID Issue & Test Scenario Steps Expected Result Pass/Fail
TC1 Canvas scaling leaves scrollable margin above and below
  1. Start new xb_page.
  2. Scale canvas to 120%.
  3. Add components until page is much taller than browser window.
  4. Observe space above and below viewport.
 There should always be space above and below the viewport (~80% of window height). User can scroll to see all content. Pass
TC2 In Firefox, long page preview canvas is clipped (can't scroll)
  1. In Firefox, load long xb_page with many components.
  2. Observe preview canvas.
  3. Try to scroll up/down to see hidden content.
 Content is fully visible and scrollable. User can access all content at top and bottom of preview. Pass
TC3 Firefox: Zoom workaround for clipped preview canvas
  1. In Firefox, load long xb_page that is clipped.
  2. Zoom in/out.
  3. Observe preview after zooming.
 After zooming, preview content displays correctly and all is scrollable; scrollbars appear as needed. Pass

Status: Fixed » Closed (fixed)

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