IOS: iframe внутри Three.js CSS3DRenderer (CSS3DObject) не прокручивается ⇐ IOS

[Anonymous]

Проблема
Я создаю сцену Three.js, где экран ноутбука представляет собой CSS3DObject, содержащий (iframe загружает мое отдельное приложение React «2D OS»). Рабочий стол работает нормально, но в iOS Safari, Chrome, DuckDuckGo и т. д. содержимое iframe не прокручивается вообще (нет встроенной прокрутки), даже несмотря на то, что касание/щелчок и общий рендеринг iframe работают.
Это отличается от обычных вопросов о прокрутке iframe в iOS, поскольку iframe не имеет обычного макета DOM — он прикреплен к CSS3DObject и CSS3DRenderer применяет 3D-преобразования.
Настройка

• Сцена WebGL визуализируется в
• CSS3DRenderer добавляется как наложение, закрывающее область просмотра
• Iframe, смонтированный внутри CSS3DObject, прикрепленного к сетка «привязка экрана»

Код: Выделить всё

// createThreeContext (abridged)
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.domElement.style.touchAction = "none";

const cssRenderer = new CSS3DRenderer();
cssRenderer.domElement.style.position = "fixed";
cssRenderer.domElement.style.inset = "0";
cssRenderer.domElement.style.zIndex = "10";
cssRenderer.domElement.style.pointerEvents = "none"; // toggled later
document.body.appendChild(cssRenderer.domElement);

Код: Выделить всё

// mountScreenOverlay (abridged)
const wrapper = document.createElement("div");
wrapper.style.pointerEvents = "none";

const iframe = document.createElement("iframe");
iframe.src = iframeUrl;
iframe.style.border = "0";
iframe.style.background = "#111";
iframe.style.pointerEvents = "none";
wrapper.appendChild(iframe);

const cssObject = new CSS3DObject(wrapper);
screenAnchor.add(cssObject);

// sizing
wrapper.style.width = `${targetW}px`;
wrapper.style.height = `${targetH}px`;
iframe.style.width = `${targetW}px`;
iframe.style.height = `${targetH}px`;

Когда я «фокусирую» ноутбук, я переключаю события указателя, чтобы разрешить взаимодействие с iframe:

Код: Выделить всё

wrapper.style.pointerEvents = "auto";
iframe.style.pointerEvents = "auto";

Содержимое iframe
Внутри iframe пользовательский интерфейс представляет собой «оконную систему» ​​React, где прокрутка происходит внутри внутреннего элемента div (

Код: Выделить всё

overflowY: scroll). В настоящее время я реализовал ручную сенсорную прокрутку внутри iframe. Он «работает», но на iOS он часто кажется дерганым/глючным (это похоже на встроенную прокрутку браузера и мою ручную прокрутку, иногда срывающуюся назад). Без ручной прокрутки iOS не будет прокручивать контент.
[b]То, что я пробовал (не сработало)[/b]
Обычные исправления прокрутки iframe iOS, такие как «wrap iframe in a div + -webkit-overflow-scrolling: touch

», не помогли в этой настройке, поскольку мое находится внутри преобразований CSS3DRenderer.:

• Дэвид Уолш: https://davidwalsh.name/scroll-iframes-ios
• Другие темы StackO:
  
  Прокрутка Iframe в iOS 8.
  
  Как заставить IFrame реагировать в iOS Safari?
  
  IFrame не прокручивается в IOS Safari

Примечание.
Когда 2D-сайт запускается автономно и доступен непосредственно на мобильном устройстве, прокрутка работает корректно и без проблем.
Вопрос

• Является ли iOS принципиально неспособной прокручивать внутри iframe при 3D-преобразованиях (CSS3DRenderer)?
• Уместна ли ручная прокрутка или я что-то упускаю? Если это так, я не смогу предотвратить конфликт с прокруткой браузера, даже если я добавлю миллион preventDefault()

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-t-scroll