CSS3DRenderer interactive blind spot about three.js HOT 14 CLOSED

https://bugs.chromium.org/p/chromium/issues/detail?id=1472979

from three.js.

I tested similar situations without three.js in desktop Chome.
I think this is a browser issue.

https://jsfiddle.net/obL2szdc/

from three.js.

That is expected. Both Edge and Chrome are built on top of Chromium. Therefore, the behavior should be the same.
Regarding Firefox, that is another browser issue. You could report the bug in Bugzilla.

from three.js.

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.

from three.js.

@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.

from three.js.

BTW, I found another problem with the demo. When I scroll, the element disappear😹
Not sure this happens on other devices though...

from three.js.

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?

• #27017

from three.js.

The edge[115.0.1901.203 (Official Version) (64-bit)] browser also has this problem. Although Firefox can interact normally, some css behavior is still problematic. For example, the border exception and the mesh edge is jagged.

from three.js.

That is expected. Both Edge and Chrome are built on top of Chromium. Therefore, the behavior should be the same. Regarding Firefox, that is another browser issue. You could report the bug in Bugzilla.

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.

from three.js.

BTW, I found another problem with the demo. When I scroll, the element disappear😹

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 CSS3DRenderer that demonstrates the Firefox issue? I guess I can make a report at Bugzilla.

from three.js.

顺便说一句，我发现了演示的另一个问题。当我滚动时，元素消失😹了

也许当交互问题得到解决时，这会自动修复。我想我会等待在 Chromium 错误跟踪器上提交另一个错误，直到第一个错误得到解决。

有机会提供一个演示Firefox问题的现场示例吗？我想我可以在Bugzilla做一个报告。CSS3DRenderer

@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

from three.js.

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.

from three.js.

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 position:sticky and is located inline within the page body. The transformed 3D position of the object differs greatly in Chrome, depending on whether el.offsetLeft for the container is a whole number or not. Interestingly, Chrome DevTools highlights the element in the expected position either way, regardless of where the element is actually displayed.

.offsetLeft is a whole number:

.offsetLeft is a non-whole number:

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...

from three.js.

I've filed a new issue for the problems I mentioned above:

• #26950

from three.js.