How to deal with the positioning of the elements with the property transform-style: preserve-3d in Mozille?

Good day is there a website wise-side.ru/demo/olympicon the first screen of this site, there are three 3 blocks of text which are made by using transform-style: preserve-3d, so that when you perform the rotation(the interval 8сек) was the visibility of volume blocks. Display in all browsers adequate, ie as it should be by design joxi.ru/Drlb0RgS41vRB2
And here in mozille somehow the middle block is positioned above the rest above joxi.ru/a2XKXEztyO1zxm . Z-index is not helpful....
Can't understand why it happens and how to solve this problem , if anyone can share experiences or faced with similar , prompt please what to do with this?
July 8th 19 at 12:21
1 answer
July 8th 19 at 12:23
Unfortunately no. The bug is old, and his mind generally fixes not even trying.
Here's my question on SO from February last year stackoverflow.com/questions/28751990/firefox-bug-w...
He asked he somehow hacked (in the comments explained + in the last comment the link to the demo, there seems also comments).
I've done a lot of demos with 3D transformations and multiple attachment elements with transform-style: preserve-3d and each time stepping on the same rake. Here's another demo, where the hack did not work, in the end, in FF everything is broken - codepen.io/suez/pen/WvaKpy And then people keep saying that FF is a good browser for web developers, that makes me sick laugh.

As for your particular situation, you just have to avoid nesting the items and divide them according to their individual containers with the prospect, and so on. Then you have no reason to keep 3 units in 1 container, just make 3 of the container, set the desired z-index, but within each make 3D effect and they couldn't be with each other intersect. All with transforms, z-index and combination of other properties often have problems, the easiest way of fixing this is increasing the number of wrapper containers. Too lazy to go into details, just believe me naslovo, I have a lot of experience of suffering in this area :)
I tried this method fix(now again made at Your suggestion), ie as you say to use a for each block a separate parent container , but the bug still manifests itself( Immediately when you open the page elements layout is not as it should, but when they spun it positioned properly(but still it is not so suitable because in the beginning you can see the bug) and plus if you hover the button , it hides as it was originally.
Yeah here just to suffer) - Krystel_Hanse commented on July 8th 19 at 12:26
: The lousy with such bugs, even as a fallback is not done. All checks for support will say that with the browser everything is OK... Only if you detectit FF old ways via the useragent and slip version without the real 3D. Well, or to suffer until you find a solution... - jacky_Murazik commented on July 8th 19 at 12:29

Find more questions by tags CSS