One day to next (possibly due to chrome update), css3dObjects exhibit strange pattern of display. How should I debug?

Questions
1

Yesterday everything worked fine: the css3dobjects are moved and rotated around the canvas.
At the moment, they dont display by default, only after I apply a blur(0px) on the element.style.filter (??), but even then, they disappear when they are rotated to reappear again when they face the camera. The whole object appears / disappears.
Additionally, when the canvas is larger than the screen, they dont show up in the middle of the viewport.
This behavior is not present in Mozilla and all the official css3d examples work fine.

I know this is a very vague and unstructured report but i am very much stuck, any idea or debugging advice would help. I don’t know where to start, its so weird!

1 Like
2

Do you have single or double sided view?
Are you using dragControls?

1 Like
3

Thanks for the answer!
I am not using dragcontrols.
I’m not sure what you mean by double sided view since as far as i know double side is a property of a regular 3dObjects material. I’ve played around with the elements .style.backfaceVisibility value but no effect.

4

It happened the same thing to me, the website I made has css3d objects in a canvas mixed with threejs. It’s literally the same concept as in this website http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

You can even check the example in both Mozilla and Chrome and the latter stopped working suddenly
http://jeromeetienne.github.io/videobrowser4learningthreejs/

Same as @Attila_Miklya I don’t know how to proceed, any help would be appreciated.

5

I’ll let you know if I manage to debug this. This must be a css 3dtransform issue, right?

6

Clutch I just checked yours in duck duck go mobile browser, Firefox mobile browser and Chrome mobile browser all work

7

Have either of you guys resolved this issue? Because I’m deciding now as to whether try implementing some css3d elements in a project.

8

I havent, unfortunately.

9

@Mugen87 Can you perhaps weigh in on this issue? It seems that some css projects may be halted due to this problem, not to mention the live websites that might be affected…

10

I’m unable to reproduce. The page seems to work with Firefox and Chrome (on macOS).

I can only help with this issue if someone shares an (editable) live example that demonstrates the problem.

11

hey, i managed to do so. the css is invisible while the planes rotate.
try commenting out the blur at row 23 and also try setting damera distance > 29(without adjusting fov)

chrome: 85.0.4183.102. mozilla is all okay.

12

I’ve been running into the same issue since last week also (found the thread only now).
Still didn’t figure out what’s the issue, but only happens on the latest Chrome (potentially only on Windows). It’s somehow related to the size of HTML element rendered. If you change camera.fov = 100 or camera.position.y = 100 in the above JSFiddle, it will render correctly all the time.

Chrome Version 85.0.4183.102

13

It renders correctly for me with Chrome 85.0.4183.102 on macOS. However, I’ve tested on a Windows notebook today and can reproduce. So it looks like a Windows only issue.

@Attila_Miklya Do you mind reporting this issue to the Chromium bug tracker?

14

in progress! 1128636 - chromium - An open-source project to help move the web forward. - Monorail
for everyone: starring the bug report might help :slight_smile:

15

Done :slight_smile:.

16

The chromium community have fixed the issue, will be live in the m87 revision of chrome, scheduled to release in a month. Yaay!
more info here: https://bugs.chromium.org/p/chromium/issues/detail?id=1136046#c15

2 Likes
17

@GlifTek if its relevant

1 Like
18

Very much so.
Thanks for that update info!