HTML Content Positioned Wrong in iOS

iOS Rendering Issue with <Html> from @react-three/drei

Hi everyone,

I’m a beginner with Three.js, so I apologize in advance if I’m missing something obvious!

I’m working on a React + Three.js project using @react-three/drei, and I have an issue with rendering HTML inside the scene when viewed on iOS (Safari & Chrome).

The Issue

I’m attaching HTML content (<Html> from @react-three/drei) to a mesh representing a screen. It displays correctly on my computer browser, but on iOS, the position of the HTML content is misaligned.

  • On my computer (Chrome/Safari), everything looks fine.
  • On iOS (Chrome/Safari), the HTML is incorrectly positioned.
  • Click events still happen at the correct (expected) position, even though the visible HTML is in the wrong place.
  • The issue is not related to screen size/responsiveness because it’s not reproducible by resizing the computer browser.

Screenshots

Clicking red part clicks help in this case:

Code Snippet

import MonitorContent from "@/components/pc/MonitorContent";
import { PCPosition } from "@/constants/positions";
import { Html, useGLTF } from "@react-three/drei";
import { Mesh } from "three";

export function PCModel() {
  const { scene, nodes } = useGLTF("/models/pc.glb");
  const screenNode =
    nodes?.screen && nodes?.screen.type === "Mesh"
      ? (nodes?.screen as Mesh)
      : null;

  return (
    <group>
      <primitive
        object={scene}
        position={PCPosition}
        rotation={[0, 0.07, 0]}
        scale={5}
      />
      {screenNode && (
        <group>
          <mesh geometry={screenNode.geometry}>
            {/* Attach HTML content to the screen */}
            <Html
              transform={true}
              position={[-0.0, 0.16, 0.05]} // Slightly in front of the screen
              rotation={[-0.35, 0.07, 0.03]}
              distanceFactor={1} // Adjust to match the screen perspective
              occlude="blending"
            >
              <div
                className="h-full w-full max-h-full max-w-full overflow-hidden"
                style={{
                  height: "113px",
                  width: "138px",
                }}
              >
                <MonitorContent />
              </div>
            </Html>
          </mesh>
        </group>
      )}
    </group>
  );
}

Possible Causes?

  • Is there a known issue with how <Html> elements are positioned/rendered in iOS?
  • Could this be related to how iOS handles WebGL layers or DOM overlays?
  • Are there workarounds to ensure consistent positioning across all devices?

Any insights or suggestions would be greatly appreciated! Thanks in advance. :blush:

1 Like