CSS2DObject - potential rendering issue in Safari MacOS

[simondate]

Describe the bug

Our team has used Three.JS to create a Virtual Tour content type that allows content authors to create interactions which enables the user to navigate around a scene, click on interactions and change to different scenes.

We've recently updated our this content type to work with labels which are 2d objects. However after testing in Safari we started to notice that lines would be drawn all over the scene from our labels. These lines go away when you hover over a label again however they keep on coming back and look quite distracting for a user.

Potential fix

I found that by using whole numbers, rather than decimal numbers, for the pixel position of the buttons (which the labels that cause the issue are a child of). This would be done by adding Math.round twice on this line. I've made the change on our fork of the Three.JS library and it has has issue has been gone since.

I was wondering if anyone had noticed any issue like this and if this fix is valid? Or if it's instead caused by another change we made somewhere.

Code

https://github.com/h5p/h5p-three-image/tree/release
https://github.com/h5p/h5p-three-js
https://github.com/h5p/h5p-three-sixty/tree/release

Demo

https://staging.h5p.org/node/622030

Screenshot and video

https://www.screencast.com/t/1J7ZjSWc

Platform:

• Device: [Desktop]
• OS: [MacOS]
• Browser: [Safari]
• Three.js version: [Not sure, but was updated Feb 2019]

[mrdoob]

Seems like Safari invalidation code is buggy...

I'm curious to see what the side effects of adding this workaround are. Could you do a Pull Request with the change?

[Mugen87]

Maybe https://bugs.webkit.org/show_bug.cgi?id=215590?

In this case the issue is a duplicate of #19854?

[simondate]

@Mugen87 This issue only occurs with 2d objects, if 3d objects are used the problem goes away.

I've tested it both on my own Macbook as well as using BrowserStack with Safari and MacOS and got the same outcome. I couldn't replicate on Safari on my iPad.

[Mugen87]

It still seems that the problem with Safari is caused by the same issue. Meaning Safari is rounding during the translation step, see #20069 (comment).

[mrdoob]

I don't think it's the same issue.
I think #20069 is about WebKit rounding numbers internally.
This issue is about WebKit not invalidating the drawn area correctly so it leaves trails.
Chrome used to have this issue years ago.

[elalish]

Hmm, I don't repro the bug on my macbook pro on Safari using this hotspots example: https://modelviewer.dev/examples/annotations/index.html#addHotspots

This uses the CSS2DRenderer, so maybe there's a different workaround? I'm a little concerned about rounding to integer pixels since there are now commonly several real pixels per CSS pixel. I think it could adversely affect smoothness of motion.

[simondate]

@elalish I can't replicate in your demo either.

I'm not entirely sure if the fact it's a scene being rotated instead of an object that is being viewed that would make a difference?

[wooster0]

Apologies if I'm missing something but shouldn't this branch be removed now that this issue linked in the comment in this branch is fixed?

three.js/examples/jsm/renderers/CSS2DRenderer.js

Line 128 in ba4b34c

if ( /apple/i.test( navigator.vendor ) ) {

[mrdoob]

Where does it say it has been fixed?

[anton-ax]

This fix creates a new problem, now labels is shaking in safary :(

[mrdoob]

@Native1989 can you share a screen recording?

[fanciful-marmot]

@mrdoob

Close up video of jitter from rounding on Safari:

safari-jitter.mov

Comparison on Chrome:

chrome-smooth.mov

Here's the codesandbox used in the videos: https://codesandbox.io/s/exciting-lederberg-f0uu78?file=/src/index.js
The red square is rendered with CSS2DRenderer.

I'd be happy to open a PR removing the rounding if it's not needed any more

[mrdoob]

I'd be happy to open a PR removing the rounding if it's not needed any more

Yeah, lets try removing it 👍