interact.js icon indicating copy to clipboard operation
interact.js copied to clipboard

Draggable iframe stops almost immediately on iOS

Open sp1x opened this issue 3 years ago • 2 comments

I'm trying to make iframe draggable using default code from docs.

HTML

<div class="iframe-wrap draggable">
  <iframe src="https://bbc.com" frameborder="0" ></iframe>
</div>

JS

const position = {x: 0, y: 0};
interact('.draggable').draggable({
  listeners: {
    move(event) {
      position.x += event.dx;
      position.y += event.dy;
      event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
    },
  }
});

CSS

.iframe-wrap {
  touch-action: none;
  user-select: none;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: fixed;
  z-index: 9;
}
.iframe-wrap iframe {
  pointer-events: none;
  height: 300px;
}

It works perfect on Android devices. But on iOS dragging stops almost immediately.

sp1x avatar Feb 01 '22 16:02 sp1x

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Mar 02 '22 10:03 stale[bot]

I'm planning on improving iframe support soon, but I can't give an estimated time, sorry.

If you don't need users to be able to click into the iframe, you can work around this by covering the iframe element with a transparent overlay.

taye avatar Apr 07 '22 13:04 taye