Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS3DRenderer: Transforms broken depending on container size and position #26950

Open
donmccurdy opened this issue Oct 11, 2023 · 7 comments
Open

CSS3DRenderer: Transforms broken depending on container size and position #26950

donmccurdy opened this issue Oct 11, 2023 · 7 comments
Labels
Browser Issue

Comments

@donmccurdy
Copy link
Collaborator

donmccurdy commented Oct 11, 2023 •
edited
Loading

Description

Background: The purpose of THREE.CSS3DRenderer is to apply CSS transforms to HTML elements, such that they appear to be within the 3D scene. They're still HTML elements of course, are not drawn to the depth buffer, and cannot participate in occlusion and lighting like THREE.Mesh objects.

Problem: The CSS 3D transforms required for correct element placement are very fragile to specific conditions of the DOM element given to CSS3DRenderer. The specific conditions are, very unfortunately, different in every major browser:

  • Chrome:
  • Safari:
    • Display: HTML placement varies dramatically with the width and height of domElement. I haven't figured out logic of it, but using even numbers for both width and height appears to avoid the problem.
    • Interactivity: The interactive hitbox appears to stay in the expected location, even when the element is incorrectly displayed elsewhere.
    • Bugs:
  • Firefox:
    • Display: Display is stable regardless of domElement offset, width, and height. However, using display: sticky on any ancestor of domElement will cause the CSS transforms to break badly during scrolling.
    • Interactivity: Interactive hitbox is correct and stable.

Presumably these are some browser bugs involved, but this was complex enough to track down in detail that I think we may want this issue documenting the situation. This bug also affects implementations derived from CSS3DRenderer, including drei's <HTML /> component and threlte's <HTML /> component.

This is likely related to the root cause for a number of other issues, including:

Reproduction steps

  1. Open live example (https://jsfiddle.net/donmccurdy/twy3p2zv/)
  2. To see display issues, adjust offsets, width, or height
  3. To see interactivity issues, hover mouse over :) to change its background color

Code

See live example.

Live example

https://jsfiddle.net/donmccurdy/twy3p2zv/

Screenshots

expected actual
expected broken

Version

r157

Device

Desktop

Browser

Chrome, Firefox, Safari

OS

MacOS
This was referenced Oct 11, 2023
Open
Open
Open
Closed
@makc
Copy link
Contributor

makc commented Oct 20, 2023

I dont get the bug above in any of the browsers, but tbh I had enough issues with css3d trying to use it in production to just abandon all hope for it. It is broken in random browsers in unexpected ways.

@donmccurdy
Copy link
Collaborator Author

@makc that's surprising to me -- in Chrome, the face stays centered as you drag the offsetLeft slider around? Could I ask what operating system you're using?

@donmccurdy
Copy link
Collaborator Author

donmccurdy commented Oct 20, 2023 •
edited
Loading

I tried modifying CSS3DRenderer with two changes:

  1. remove perspective: ${fov}px from viewElement
  2. add transform: perspective(${fov}px) ... to cameraElement

This appears to fix the positioning problems in Chrome and Firefox, but not Safari. I'm not sure yet if there is a downside.

https://jsfiddle.net/donmccurdy/omc1qxjf/

@donmccurdy donmccurdy mentioned this issue Oct 20, 2023
Merged
@makc
Copy link
Contributor

makc commented Oct 20, 2023

what operating system you're using

oh right, you used mac, this is win. mac m1 indeed has a problem

@makc
Copy link
Contributor

makc commented Oct 20, 2023

actually now I can reproduce in win chrome too
image

@donmccurdy
Copy link
Collaborator Author

Ahh ok! Hm... interesting that those specific values do not trigger the bug in Chrome for me, only fractional offsets. Perhaps the conditions for the bug are slightly different in windows. 🫤

@Mugen87 Mugen87 mentioned this issue Oct 26, 2023
Closed
@Mugen87 Mugen87 mentioned this issue Dec 14, 2023
Closed
@c4ntin
Copy link

c4ntin commented Dec 14, 2023

Hi, I reproduce the bug on iphone, ipadOS 16.1 with threejs 0.159
An other test case for you : jsfiddle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Browser Issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@makc @donmccurdy @c4ntin @Mugen87