861835 - 3D-transforms and z-index in FF/Gecko

Status: RESOLVED DUPLICATE of bug 810685

Description

[Ilya Pukhalski]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.28.10 (KHTML, like Gecko) Version/6.0.3 Safari/536.28.10

Steps to reproduce:

Hi all.

I hope somebody could rise up the following problem or can help with solution.

The situation is next: I created a scene using CSS 3D-transforms.
Demo: http://websaints.net/demo/model/field.html

On webkit-browsers everything seems to be fine: http://websaints.net/demo/CHROME-1.png. But FF has another look on this: http://websaints.net/demo/FF-1.png

The problem is that the blocks that go later in DOM everytime are overlapping the blocks that are before.

Probably it's because webkit doesn't consider z-index in calculation of overlapping of transformed objects but gecko does.

My trying to solve this were next:
Apply to all objects position: static to drop z-index
Reduce the number of objects with transformations
Apply z-index to all the blocks

http://websaints.net/demo/model-v1/field.html
http://websaints.net/demo/FF-2.png

The first and the second one solution work so far enough but not for the scene with a big amount of objects...

http://websaints.net/demo/FF-3.png
http://websaints.net/demo/model-v2/field.html

The third one works with z-index recalculation but it will be huge enough and cannot be applied at all.

MacOsX 10.8.3
Latest chrome/canary and ff/nightly

I will be kindly happy hear all the comments you have.

Thank you in advance,
Ilya Pukhalski

Comment 1

[Tiziana Sellitto [:tiziana]]

Thanks for reporting this. It seems to be the same of bug 810685