search

codesandbox / codesandbox-client

An online IDE for rapid web development
https://codesandbox.io
Other
13.13k stars 2.3k forks source link

IFrame features are failing because Chrome does not parse sandbox due to allow-autoplay #4525

Closed adeelraza closed 4 years ago

adeelraza commented 4 years ago

🐛 bug report

Description of the problem

Drag-n-drop inside our Codesandbox does not work on Chrome. This probably started when you added allow-autoplay to iframe sandbox attribute because now Chrome throws an error:

Screen Shot 2020-07-08 at 10 17 04 PM

How has this issue affected you? What are you trying to accomplish?

All our playground demos are failing because our product is a drag-n-drop builder.

Link to sandbox: [link]() (optional)

https://codesandbox.io/embed/github/unlayer/playgrounds/tree/master/javascript/basic

Your Environment

Software Name/Version
Browser Chrome
Operating System Mac OS X
CompuIves commented 4 years ago

Hey! This is a good find, I've created a PR that hopefully fixes this. I'll merge the PR regardless of the outcome, because you're right that the property should not be there. When the PR has been deployed we can test if this fixes the dnd too. My other hunch is that maybe drag and drop might not work 2 iframes deep, but I'm not sure yet.

adeelraza commented 4 years ago

@CompuIves Although after more digging, I found that something else in the way Codesandbox adds the iframe is making drag-n-drop to not work in Chrome. Any idea what that maybe?

In my research so far, I have found that this happens if the parent element of the iframe has height or width 100% and is close to overflow.

CompuIves commented 4 years ago

Ohh, that's super interesting!! I'm testing now locally as well, with an iframe, slowly adding more sandbox properties, but it could indeed be something with layout.

adeelraza commented 4 years ago

If I replace the div above with the iframe, drag n drop works fine. You can try it in the Chrome inspector.

  1. Right click on iframe, click Edit HTML, and copy iframe code
  2. Right click on div above, click Edit HTML and paste iframe code

image

CompuIves commented 4 years ago

Hmm, weird. Locally it only doesn't work for me if the height of the iframe is my screen height or larger...

Testing with this code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe
      style="height: 1060px; width: 100vw;"
      src="https://1o6vjpw35q.csb.app/"
    ></iframe>
  </body>
</html>
adeelraza commented 4 years ago

@CompuIves yes, that's exactly what I found in my local testing too. As soon as I change the width or height to be less than my viewport, it starts to work fine.

CompuIves commented 4 years ago

This seems to be a bug related to Chrome, I'm not sure how we can fix this exactly, maybe the only way would be to render the embed preview with a height of (100% - 1px)?

github-actions[bot] commented 4 years ago

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

github-actions[bot] commented 4 years ago

This issue has been automatically closed because there wasn't any activity after the previous notice or the stale label wasn't removed.