<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">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.</p>
<p dir="auto">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.</p>
<p dir="auto"><strong>Potential fix</strong></p>
<p dir="auto">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 <code class="notranslate">Math.round</code> <a href="https://github.com/mrdoob/three.js/blob/a543c8170cdaa32b635be97bec59fe2db76cdc78/examples/js/renderers/CSS2DRenderer.js#L96">twice on this line</a>. I've made the change on <a href="https://github.com/h5p/h5p-three-js/blob/release/three.min.js#L1398">our fork </a>of the Three.JS library and it has has issue has been gone since.</p>
<p dir="auto">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.</p>
<p dir="auto"><em><strong>Code</strong></em></p>
<p dir="auto"><a href="https://github.com/h5p/h5p-three-image/tree/release">https://github.com/h5p/h5p-three-image/tree/release</a><br>
<a href="https://github.com/h5p/h5p-three-js">https://github.com/h5p/h5p-three-js</a><br>
<a href="https://github.com/h5p/h5p-three-sixty/tree/release">https://github.com/h5p/h5p-three-sixty/tree/release</a></p>
<p dir="auto"><em><strong>Demo</strong></em></p>
<p dir="auto"><a href="https://staging.h5p.org/node/622030" rel="nofollow">https://staging.h5p.org/node/622030</a></p>
<p dir="auto"><strong>Screenshot and video</strong></p>
<p dir="auto"><a href="https://www.screencast.com/t/1J7ZjSWc" rel="nofollow">https://www.screencast.com/t/1J7ZjSWc</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1676635/110128427-0f160f80-7dc7-11eb-8e9e-52f975c53bfe.png"><img src="https://user-images.githubusercontent.com/1676635/110128427-0f160f80-7dc7-11eb-8e9e-52f975c53bfe.png" alt="Screenshot 2021-03-05 at 14 06 20" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: [Desktop]</li>
<li>OS: [MacOS]</li>
<li>Browser: [Safari]</li>
<li>Three.js version: [Not sure, but was updated Feb 2019]</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">When combining a webgl renderer with a cssrenderer (by punching holes through the webgl renderer to show the css renderer below, there is sometimes a missmatch between the renderers. It looks as if the cssRenderer has a slight offset compared to the webglrenderer. Interestingly enough, this happens on iPhoneX, but not iPhoneSE or iPad Mini4 and also not on android and desktop. Not sure about newer iPhones. The problem is especially present when looking at the css area at a very shallow angle.</p>
<p dir="auto">The problem is not bound to the css object present (also tried it with a simple <a target="_blank" rel="noopener noreferrer" href=""><img style="max-width: 100%;"></a>).<br>
There should be no white area around the youtube video:<br>
<a href="https://youtu.be/SV2P5B5U1jg" rel="nofollow">Video</a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4518980/87684517-a1a76700-c782-11ea-8165-27c0bfe022f2.jpeg"><img src="https://user-images.githubusercontent.com/4518980/87684517-a1a76700-c782-11ea-8165-27c0bfe022f2.jpeg" alt="Screenshot 1" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4518980/87684522-a2d89400-c782-11ea-9446-15e20f08e0e7.jpeg"><img src="https://user-images.githubusercontent.com/4518980/87684522-a2d89400-c782-11ea-9446-15e20f08e0e7.jpeg" alt="Screenshot 3" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li><a href="https://codepen.io/JohannesDeml/pen/NWxdXEM" rel="nofollow">codepen</a> (latest release branch)</li>
</ul>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r118</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Safari</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iPhone SE</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iPhone 8</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> iPhone X</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> iPhone 11 Pro</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> MacBook Pro with external High DPI Display</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> iMac</li>
</ul>