taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
http://interactjs.io/
MIT License
12.32k stars 783 forks source link

Draggable iframe stops almost immediately on iOS #951

Open sp1x opened 2 years ago

sp1x commented 2 years ago

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.

stale[bot] commented 2 years ago

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.

taye commented 2 years ago

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.