interact.js
interact.js copied to clipboard
Draggable iframe stops almost immediately on iOS
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.
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.
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.