HTML Content Positioned Wrong in iOS

Questions
, , , ,
1

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

Screenshot 2025-01-25 at 21.46.04
Screenshot 2025-01-25 at 21.46.041920×1241 113 KB

Clicking red part clicks help in this case:

Screenshot 2025-01-25 at 21.47.43
Screenshot 2025-01-25 at 21.47.43426×326 20.9 KB

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
2

Hi!

I’m having exactly the same issue with one of my project: HTML is well positioned on non iOS devices and completely off on iOS ones. And the position on these devices seems to be influenced by the width of the screen as well…

By any chance, did you manage to have some anwsers or find a solution?

Thanks!

3

This is an iOS bug. You might be able to work around it by changing the height/width of the canvas. Longer thread:

4

Thank you very much Don :smiley:! I’m going to check the thread right away!