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

HTML transform not working anymore after change to transform perspective #1723

Closed
MaxTwentythree opened this issue Nov 16, 2023 · 3 comments · Fixed by #1724
Closed

HTML transform not working anymore after change to transform perspective #1723

MaxTwentythree opened this issue Nov 16, 2023 · 3 comments · Fixed by #1724
Labels
bug Something isn't working released

Comments

@MaxTwentythree
Copy link

  • three version: 0.158.0
  • @react-three/fiber version: 8.15.11
  • @react-three/drei version: 9.88.15

Hi,

after this change https://github.com/pmndrs/drei/issues/1695 HTML transform does not work anymore: the positioning of the HTML element is way off, it seems the transform: perspective prop is just ignored.
As soon as I use the browsers inspector and replace it again with the perspective prop as it was before, it's working as intended.

I tested this in different browsers (Chrome, Safari, Edge, Firefox), it's the same everywhere.

Is this just me?
Do I need to change something else so I can use the HTML transform as before?

That's how I use the Html component:

  <Html
      ref={onMountOuterDiv}
      distanceFactor={htmlOverlayDistanceFactor / scalingFactor}
      transform
      portal={htmlPortal}
      className={divClassName}
      wrapperClass={wrapperClassName}
      zIndexRange={[999, 100]}
    >
      <div ref={handleMount} className="w-full h-full"/>
    </Html>
@MaxTwentythree MaxTwentythree added the bug Something isn't working label Nov 16, 2023
@MaxTwentythree
Copy link
Author

I'm confused about this change anyways .. this just replaced perspective with transform: perspective, but they are not the same thing!
Perspective is applied to the parent to create a 3D space, while transform: perspective(...) is applied to the child element itself as part of its transformation.

@CodyJasonBennett CodyJasonBennett mentioned this issue Nov 16, 2023
Merged
@github-actions GitHub Actions
Copy link

🎉 This issue has been resolved in version 9.88.16 🎉

The release is available on:

Your semantic-release bot 📦🚀

@MaxTwentythree
Copy link
Author

Thanks! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: revert "fix(Html): use transform for perspective browser issues" pmndrs/drei
1 participant
@MaxTwentythree