CSS2DObject - potential rendering issue in Safari MacOS

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]

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.