-
-
Notifications
You must be signed in to change notification settings - Fork 35.2k
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.
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
CSS3DRenderer interactive blind spot #26583
Comments
I tested similar situations without three.js in desktop Chome. |
Indeed. The fiddle does work in Firefox and Safari. Since the test case breaks with Chrome Canary 118.0.5949.0 as well, I'll file a bug at the Chromium bug tracker. |
@yomotsu Yes, you are right. With too much trust in Google Chrome, I was so immersed in computing the transform to solve interaction problems that I forgot about browser compatibility issues. |
BTW, I found another problem with the demo. When I scroll, the element disappear😹 Screen.Recording.2023-08-15.at.23.47.26.mp4 |
That is expected. Both Edge and Chrome are built on top of Chromium. Therefore, the behavior should be the same. |
Yes, run the example with Edge[115.0.1901.203] 、 Chrome[115.0.5790.171] and the elements disappear, Firefox[116.0.2] works ok. It seems that using CSS3DRenderer will encounter more compatibility issues. |
Maybe this gets automatically be fixed when the interactivity issues are getting solved. I guess I'll wait with filing another bug at the Chromium bug tracker until the first one is resolved. @jouvychen Any chances to provide a live example with |
@Mugen87 Hi, when I published this as an online example, I was surprised to find that the border style issue no longer exists, but it still exists in local development. The linkCSS3DObject |
I had similar behavior last month on a PC laptop with CSS3D. The bug behavior is reproducible with GUI panel bug behavior GUI panel. In this case, a GUI panel on top would leave an inset mask relative to the bottom-left. Here the CSS3D would be invisible. If you moved the Controls, the inset rectangle stayed fixed with the GUI panel, as the content underneath was partially invisible. It seemed related to position:static/absolute and/or some unrepresented scroll offset. Definitely sliding content and a bad offset from an obscure element. |
I'm not positive this is exactly the same issue, but it's similar enough that I'll share. I'm using CSS3DRenderer to display an HTML element within a container element that uses
Note how the div's highlight from DevTools does not match the text in the second screenshot. I'm also seeing a very similar issue in Safari, where the object is offset vertically if the height of the container is not an even number. I'll see if I can create a simple reproduction for both issues... |
I've filed a new issue for the problems I mentioned above: |
I believe the issue can be worked around with this change – would someone be able to test against one of the original issues in this thread? |
Description
When CSS3DRenderer renders iframe interactive web pages, there are interaction blind spots at certain angles, especially when the frustum does not contain the rendering div generated by CSS3DRenderer or the angle between CSS3DRenderer and the cameraElement is too small.
Online example:
https://codepen.io/jouvychen/pen/zYMMyKp
Reproduction steps
1.First, initialize the CSS3DObject and set it's position at the origin, it works fine.
2.Then, click the upper-left button to change the CSS3DObject's position at (50, 80, -20) and camera's position at (0, 100, -100), it can't trigger scrolling events for iframe nested page.
3. Finally, click the button again, reset the CSS3DObject position at (0, 0, 0), the rolling event returned to normal.
Code
Live example
https://codepen.io/jouvychen/pen/zYMMyKp
Screenshots
No response
Version
145
Device
Desktop
Browser
Chrome
OS
Windows
The text was updated successfully, but these errors were encountered: