0.150.0以上版本，使用CSS3DRenderer时，在ios下无法展示dom，pc及安卓正常

[williampang2021]

Description

0.150.0以上版本，使用CSS3DRenderer时，在ios下无法展示dom（dom在html已经有了，可以点击，就是无法展示出来），pc及安卓正常。版本回退到0.149.0后，ios及其他浏览器下均可正常展示了。

Reproduction steps

1. 2. 3.

Code

import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

export const getLabelRenderer = () => { const labelRenderer = new CSS3DRenderer(); const width = window.innerWidth || document.body.clientWidth || document.documentElement.clientHeight; const height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; labelRenderer.setSize(width, height); document.body.appendChild(labelRenderer.domElement); // 设置样式 labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.top = '0px'; labelRenderer.domElement.style.left = '0px'; labelRenderer.domElement.style.zIndex = '10'; // 设置层级 return labelRenderer; };

export const add2DDom = ({ id, position, mesh, currentStage }) => { const div = document.getElementById(id); const label = new CSS3DObject(div);

label.rotateX(Math.PI); label.position.set(...position); // 相对于父级元素的位置 mesh.add(label); };

Live example

• jsfiddle-latest-release
• jsfiddle-dev

Screenshots

No response

Version

0.151.3

Device

Mobile

Browser

Safari

OS

iOS

[yomotsu]

Seems the live examples you attached in JSFiddle don't use CSS3DRenderer. Would it be possible to share correct examples to reproduce the problem?

As far as I checked the official CSS3D examples, all of them work in iOS Safari 16.

[Mugen87]

Besides, please file your issue in English. Other languages are not accepted.

[nikolawarren]

I also encountered the same problem，What is the solution? my IOS version is 14.1 , three.js version is 151 我也遇到了同意的问题，有上面解决办法吗？