Interact.js IFRAME bug

by Maksim Kachurin

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/interact.js"></script>
<iframe id="FileFrame" src="about:blank" width="100%" height="100%"></iframe>

<script type="text/javascript">
    var doc = document.getElementById('FileFrame').contentWindow.document;
    doc.open();
    doc.write(`<html><head><title></title><style>
   		.drag-rotate {
  width: 25%;
  min-height: 6.5em;
  margin: 10%;

  background-color: #29e;
  color: white;

  border-radius: 0.75em;
  padding: 4%;

  transform: rotate(0);
  transform-origin: center center;
  user-select: none;
  touch-action: none;
}
   </style></head>
   <body>
   <div class="container"></div>
   </body>
   </html>`);
    doc.close();
</script>

CSS

iframe {
    width: 400px;
    height: 420px;
}

JavaScript

/* BUG */
const iframeDoc = document.getElementById('FileFrame').contentWindow.document;
const container = iframeDoc.querySelector('.container');

// is it work
const dragRotateSelf = iframeDoc.createElement('div');

// is it not work
const dragRotateParent = document.createElement('div');

dragRotateSelf.className = 'drag-rotate';
dragRotateSelf.innerHTML = `
    <p> SELF (ok) </p>
`;

dragRotateParent.className = 'drag-rotate';
dragRotateParent.innerHTML = `
    <p> PARENT (fail) </p>
`;

// Add element into container
container.appendChild(dragRotateSelf);
container.appendChild(dragRotateParent);


/* ROTATE DEMO */
interact('.drag-rotate', { context: iframeDoc })
    .draggable({
        onstart: function(event) {
            const element = event.target;
            const rect = element.getBoundingClientRect();

            // store the center as the element has css `transform-origin: center center`
            element.dataset.centerX = rect.left + rect.width / 2;
            element.dataset.centerY = rect.top + rect.height / 2;
            // get the angle of the element when the drag starts
            element.dataset.angle = getDragAngle(event);
        },
        onmove: function(event) {
            var element = event.target;
            var center = {
                x: parseFloat(element.dataset.centerX) || 0,
                y: parseFloat(element.dataset.centerY) || 0,
            };
            var angle = getDragAngle(event);

            // update transform style on dragmove
            element.style.transform = 'rotate(' + angle + 'rad' + ')';
        },
        onend: function(event) {
            const element = event.target;

            // save the angle on dragend
            element.dataset.angle = getDragAngle(event);
        },
    })

function getDragAngle(event) {
    var element = event.target;
    var startAngle = parseFloat(element.dataset.angle) || 0;
    var center = {
        x: parseFloat(element.dataset.centerX) || 0,
        y:...