How I fixed a drag-to-resize width problem caused by an iframe

While building a feature that adjusts the width of a list area (.listContainer) by dragging with the mouse, I ran into an unexpected problem.

Normally this works smoothly, following the mousedown → mousemove → mouseup event flow.

But when the DOM contained an iframe, a problem came up.

❗️ The problem

Figure 1. Video of the width drag resize failing

I wrote the basic resize logic like this:

1
2
3
4
5
6
7
8
9startResizing(event) {
  this.isResizing = true;
  this.initialX = event.clientX;
  const listContainer = document.querySelector('.listContainer');
  this.initialWidth = listContainer.offsetWidth;

  document.addEventListener('mousemove', this.resize);
  document.addEventListener('mouseup', this.stopResizing);
},

While dragging, once the cursor moved over the iframe, the parent document's event flow was cut off and it no longer detected mousemove events.

The reason was simple:
👉 An iframe is treated as a separate, independent document, so when the mouse moves over the iframe, the parent DOM can't receive the events.

✅ The fix

To fix this, I added a transparent overlay layer.
When a drag starts, a transparent div covers the whole screen, so the events don't get cut off even when the mouse moves over the iframe.

After I changed the code as below, the width could be adjusted properly even with the iframe present.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44startResizing(event) {
  this.isResizing = true;
  this.initialX = event.clientX;
  const listContainer = document.querySelector('.listContainer');
  this.initialWidth = listContainer.offsetWidth;

  // Add the overlay
  this._overlay = document.createElement('div');
  Object.assign(this._overlay.style, {
    position: 'fixed',
    inset: '0',
    zIndex: '999999',
    cursor: 'ew-resize',
    background: 'transparent',
  });
  document.body.appendChild(this._overlay);

  document.addEventListener('mousemove', this.resize);
  document.addEventListener('mouseup', this.stopResizing);
},

resize(event) {
  if (this.isResizing) {
    const dx = event.clientX - this.initialX;
    const newWidth = this.initialWidth + dx;

    // Min / max width constraints
    if (newWidth >= 460 && newWidth <= window.innerWidth - 800) {
      document.querySelector('.listContainer').style.width = `${newWidth}px`;
    }
  }
},

stopResizing() {
  this.isResizing = false;
  document.removeEventListener('mousemove', this.resize);
  document.removeEventListener('mouseup', this.stopResizing);

  // Remove the overlay
  if (this._overlay) {
    this._overlay.remove();
    this._overlay = null;
  }
}

Figure 2. Video of the width drag resize working

💡 Looking back

At first I thought it was just a problem with how the events were attached, but I had overlooked the fact that an iframe is an independent document.

Solving this, I came to clearly understand that the parent document's events stop over an iframe, and I think I'll be able to find the cause and fix it quickly if a similar situation comes up again.

How I fixed a drag-to-resize width problem caused by an iframe

❗️ The problem

✅ The fix

💡 Looking back

More in Work