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 /> becomes misaligned when placed in a grid #428

Closed
markryanbotha opened this issue Jun 3, 2021 · 10 comments · Fixed by #1695
Closed

<Html /> becomes misaligned when placed in a grid #428

markryanbotha opened this issue Jun 3, 2021 · 10 comments · Fixed by #1695
Labels
bug Something isn't working Stale Inactive issue

Comments

@markryanbotha
Copy link

markryanbotha commented Jun 3, 2021 •
edited
Loading

  • three version: 0.129.0
  • @react-three/fiber version: 6.2.2
  • @react-three/drei version: 5.3.0

Problem description:

When I place a model inside a CSS grid, and I use the grid system to resize and place the item, the items within the Html tags are no longer aligned with the surface of the model.

When the page is resized, the items in the HTML tag also jump around.

Relevant code:

Here is the codesandbox with the code: https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-forked-ct4fl?file

This only seems to occur when the initial grid or row is not 1.

For example, this code works

.canvas {
  grid-row: 1/11;
  grid-column: 1/11;
}

However, this code does not

.canvas {
  grid-row: 4/11;
  grid-column: 4/11;
}

Please let me know if you are not meant to use containers with CSS to place react-three-fiber models
@markryanbotha markryanbotha added the bug Something isn't working label Jun 3, 2021
@joshuaellis
Copy link
Member

Please provide a minimal reproduction of the issue, there's too much noise in this to understand filter down the issue.

@joshuaellis joshuaellis added needs more info Needs more information before we can action something and removed bug Something isn't working labels Jun 9, 2021
@markryanbotha
Copy link
Author

markryanbotha commented Jun 9, 2021 •
edited
Loading

Updated sandbox - https://codesandbox.io/s/html-in-a-grid-system-o4grv?file=/src/styles.css

Apologies for accidentally closing the issue

@markryanbotha markryanbotha reopened this Jun 9, 2021
@joshuaellis joshuaellis added question Further information is requested bug Something isn't working and removed needs more info Needs more information before we can action something question Further information is requested labels Jun 9, 2021
@joshuaellis
Copy link
Member

This is probably an issue with the transform prop. If I remove that I can see the HTML stays in the same place between canvas changes.

These props have come in through contributions and I find a lot of the math not incredibly straight forward. If you need keep the transform prop true, then you could look at using the calculatePosition prop to tweak the pos slightly?

@donmccurdy donmccurdy mentioned this issue Oct 11, 2023
Open
@donmccurdy
Copy link
Member

Related:

@donmccurdy
Copy link
Member

I've opened a PR on three.js, attempting to fix an equivalent issue in THREE.CSS3DRenderer. I believe the same change could be applied to <HTML /> to fix the issue here, if someone would be interested in testing that. <HTML /> does not depend on CSS3DRenderer, so you'd need to modify <HTML /> directly.

@CodyJasonBennett CodyJasonBennett mentioned this issue Oct 21, 2023
Merged
@github-actions GitHub Actions
Copy link

🎉 This issue has been resolved in version 9.88.15 🎉

The release is available on:

Your semantic-release bot 📦🚀

@CodyJasonBennett
Copy link
Member

Had to revert in #1724.

@VonPappen
Copy link

Any Update on this? I updated to the latest version but it still happening. I noticed that after resizing, when the HTML element becomes misalign, if i navigate to another tab and come back to my project tab, the HTML fixes itself.

@github-actions GitHub Actions
Copy link

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

@github-actions github-actions bot added the Stale Inactive issue label Oct 30, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 7, 2024

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 7, 2024
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 Stale Inactive issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(Html): use transform for perspective browser issues pmndrs/drei
5 participants
@donmccurdy @CodyJasonBennett @joshuaellis @VonPappen @markryanbotha