CSS 3D transform Firefox problems

Question

I am trying to implement some css3 involving 3D transforms in a new project i am working on.Although i managed to overcome the limited InternetExplorer support i am having problems making Firefox work.

There seems to be excessive flickering when transforms take place either i use the rotateY(deg) or rotate3d(x,y,z,angle) method and only in Firefox. In Chrome or even in Internet Explorer they work fine.

You can see what i mean in the JSFiddle here.(Hover on the divs to see effect.)

Is there a way to fix and still have a 3d effect that will work in all three Firefox,Chrome and IE?

I am running v26 also,i even tried nightly and i am seeing excessive trembling/flickering.Are you sure you didnt notice any problems? Did you try running it in Chrome to see the difference? — Stefanos Vakirtzis, Dec 22 '13 at 01:22
they seem the same except the fact that the rotation axis seems different for the big triangle (teal) — Gabriele Petrioli, Dec 22 '13 at 01:40
Have no idea why you cant see the trembling/flickering i ll email you a ling of an actual project and will kindle ask you to chechk if can notice it there.Sending the mail now. — Stefanos Vakirtzis, Dec 22 '13 at 02:02
Anyone else can confirm if he sees the problem mentioned above? — Stefanos Vakirtzis, Dec 22 '13 at 02:08

score 2 · Answer 1 · edited May 23 '17 at 12:28

2

Edit2: I can confirm flickering in Firefox version 26.0.

You could look at this question Here for other possible ways to prevent flickering.

Edit: I apologize if this isn't much of an answer. I would have commented, but I'm not permitted to.

Edit3: The flickering for #test3d is extremely bad. The animation is rendered completely unviewable and seems to back-track several times before finishing.

edited May 23 '17 at 12:28

Community

1
1

answered Dec 22 '13 at 02:27

Leaf

552
1
4
14

Does this mean that you cant see any flickering in you computer either? If you cant comment just update your actual answer. Kindly confirm please. – Stefanos Vakirtzis Dec 22 '13 at 02:38
I seem to be able to comment on my own post. As stated in the edits above, I **can** confirm that there **is** flickering in Firefox 26. I'll now try various solutions to see if I can solve it, but honestly, it might be Mozilla's fault. – Leaf Dec 22 '13 at 03:20
In order to help your search for a solution i would like to mention that removing `perspective` completely would stop the flickering but then there won't be a 3D effect ,especially in other more complicated 3D transforms. – Stefanos Vakirtzis Dec 22 '13 at 03:25
Well i think i can fix this with playing with transitions and degrees, my real problem is the flickering:( – Stefanos Vakirtzis Dec 22 '13 at 03:39
Sorry, it seems like nothing I do makes a difference. :/ I could try re-writing it from scratch in the morning to see if that gives a better result. – Leaf Dec 22 '13 at 05:27

CSS 3D transform Firefox problems

1 Answers1