CSS3DRenderer Sprite not rendering properly on Safari

[jhelf]

You can see the issue If you look at the css renderer "sprite" exemple on safari : http://threejs.org/examples/#css3d_sprites

It works on other browsers.

[mrdoob]

Could you take a screenshot?

[WestLangley]

@mrdoob For me, it renders a single sprite in the upper-left corner.

[leitzler]

Upper left corner until dragged, then correct (iOS 9.2 Safari)

[mrdoob]

I can reproduce. Once the camera moves everything renders as it should.

[jhelf]

Ye that's the issue I get, only one sprite showing on the upper left corner. This is causing some issues on a project I'm working on where I don't move the camera and therefore the sprites are not rendered properly. For now I reverted back to an older version of the renderer which fixed the problem for now.

Let me know if you find a solution for it. No sure why Safari would act differently than Chrome.

Thanks! Jean

[speigg]

The problem is caused by this commit https://github.com/mrdoob/three.js/commit/8ed08e983fcc78a50b8ac4ee917a23754cc6fd55

(Or at least a similar problem that I am seeing).

[Mugen87]

@speigg You're right. Replacing the following line in THREE.CSS3DRenderer fixes the bug. At least on my iMac and Safari 9.0.3.

var epsilon = function ( value ) {

    //return Math.abs( value ) < Number.EPSILON ? 0 : value;
    return Math.abs( value ) < 0.000001 ? 0 : value;

};

Um, but i can't figure out why Number.EPSILON produces this behavior in Safari...

[speigg]

When the value is very close to zero, Safari will output numbers in scientific notation, i.e. 1.6×10−10 becomes 1.6e-10 (presumably all JavaScript engines do this). But in safari, the scientific notation is not parsed correctly by the css transform matrix3d function.

[speigg]

I suppose this could also cause problems with large numbers. A proper solution would somehow ensure that scientific notation is never used for numbers in the matrix3d function.

[Mugen87]

But in safari, the scientific notation is not parsed correctly by the css transform matrix3d function.

@speigg So you estimate this as a faulty behavior of the browser? If so, i think we should submit a bug at Apple (http://www.apple.com/feedback/safari.html). It's definitely bad, when browser implementations vary in this area.

[mrdoob]

Sounds like a Safari bug indeed!

[Mugen87]

I've reported a bug. Let's see what will happen....

[matthewpizza]

Ran into this issue as well—it became much more pronounced after the Safari 9.1 update. The temporary workaround I implemented staggers adding the CSS3DSprites to the scene. It doesn’t fix, but it helps!

[speigg]

The fix is to change the epsilon function in CSS3DRenderer as described above

[matthewpizza]

I experienced issues even after changing Number.EPSILON to 0.000001

[Mugen87]

Unfortunately, i've got no response on my bug report so far (used Apple Bug Reporter). The answer of Apple/Safari Team is still something i'm very interested in. Honestly, i prefer a bugfix for Safari rather than changing CSS3DRenderer. All browsers should identically process the css transform matrix3d function.

[litherum]

Attaching a reduction test case of the WebKit bug. Reduction.html.zip

[litherum]

I found this WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=154506

[saru-dev]

@Mugen87 I agree with your point about parity but in the absence of a fix from Apple I have had to modify a project copy of the renderer as per #8839 using :

var epsilon = function ( value ) { return Math.abs( value ) < Number.EPSILON ? 0 : Number( value.toFixed(6) ); };

which enables compatibility for my project. I have applied this fix to the CSS3DStereoRenderer also and would like to ask why this was renderer was removed from Three? Moving forward could there be an option to incorporate it in the CSS3DRenderer as an option ?

[Mugen87]

I have applied this fix to the CSS3DStereoRenderer also and would like to ask why this was removed from Three?

Sry, i don't know that. I'm just annoyed that this problem is still not fixed in webkit: Bug 127720 - CSS 2.2: Support scientific notations for all numbers in CSS

[Mugen87]

I can confirm that the bug is finally fixed with the latest version of WebKit Nightly (r209601). The mentioned CSS3D example works perfectly :raised_hands: