Блог

Главная - Вопросы по программированию - проблема взаимодействия с контентом iframe на iphone

проблема взаимодействия с контентом iframe на iphone

#javascript #html #css #iframe #p5.js

Вопрос:

Я разработал новый веб-сайт, на главной странице я разместил iframe, содержащий интерактивный эскиз в p5js. На настольных компьютерах и Android нет никаких проблем, но на iPhone есть много проблем. Во-первых, iframe не распознает мои взаимодействия. А во-вторых, в Safari отображается только часть iframe!

Я попытался поместить iframe внутрь div и дать div

 overflow: inherit !important; 
-webkit-overflow-scrolling: touch;

и в css iframe

 sandbox: allow-forms allow-same-origin allow-scripts;"

Но это не работает.

 body {
  mix-blend-mode: difference;
}

#sequencing {
  width: 100vw;
  height: 100vh;
  border: 0px;
}

font {
  position: fixed;
  top: 1%;
  font-family: Arial;
  font-size: 14pt;
  font-weight: 100;
  z-index: 1;
  mix-blend-mode: difference;
}

a:link {
  color: gray;
  text-decoration: none;
  mix-blend-mode: difference
}

a:visited {
  color: gray;
  text-decoration: none;
  mix-blend-mode: difference
}

a:hover {
  color: gray;
  text-decoration: underline;
  mix-blend-mode: difference
}

a:active {
  color: gray;
  text-decoration: none;
  mix-blend-mode: difference
}

p1 {
  position: absolute;
  top: 20%;
  left: 20%;
  font-family: Arial;
  font-size: 50px;
  font-weight: 100;
  z-index: 1;
} 
 <!doctype html>
<html>

<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.7 maximum-scale=1 user-scalable=no">
  <title>studio.gianlucamarta</title>

  <link href="style.css" rel="stylesheet" type="text/css">
  <style>

  </style>
</head>

<body bgcolor="black">

  <iframe style="position: fixed; border: none; width: 100%; height: 100%; top: 0%; left: 0; overflow: inherit !important;  -webkit-overflow-scrolling: touch !important; " src="https://preview.p5js.org/001marta001/present/IkfFXnOSy"></iframe>

  <font style="left: 1%; font-weight:bold;"><a href="https://studio.gianlucamarta.net" target="_self">studio.<br>gianlucamarta</a></font>

  <font style="top: 94%; left: 1%; color: grey; font-weight:normal;">Project by<br><a href="https://gianlucamarta.net">gianlucamarta.net</a></font>

  <font style="right: 1%; text-align: right; color: grey; font-style: italic;font-weight:normal;">Independent Creative Technologist</font>
  <font style="top: 94%; right: 1%; text-align: right; color: grey; font-weight:normal;">Milano<br>2021</font>


</body>

</html>
Метки: