Как разобраться с позиционирование элементов со свойством transform-style: preserve-3d в Mozille?

Question

[Spisoktem]

Доброго дня есть сайт wise-side.ru/demo/olympic, на первом экране этого сайта присутствуют три 3 блока с текстом , которые сделаны с помощью transform-style: preserve-3d, для того что когда выполнялось вращение(интервал через 8сек) была видимость объема блоков. Отображение во всех браузерах адекватное, т.е как и должно быть по дизайну joxi.ru/Drlb0RgS41vRB2
А вот в мозилле каким-то образом средний блок позиционируется над остальными выше joxi.ru/a2XKXEztyO1zxm . Z-index здесь не помогает....
Не могу понять почему так происходит и как решить эту проблему , если кто может поделится опытом или сталкивался с подобным , пожалуйста подскажите что делать с этим?

Answer 1

[Nikolay Talanov]

К сожалению никак. Баг старый, и его по виду вообще фиксить не пытаются даже.
Вот мой вопрос на SO из февраля прошлого года - stackoverflow.com/questions/28751990/firefox-bug-w...
Сам спросил, сам кое-как хакнул (в комментах пояснил + в ласт комменте ссылка на демку, там вроде тоже комментарии оставлены).
Я уже делал много демок с 3д трансформациями и множественным вложением элементов с transform-style: preserve-3d и каждый раз наступал на одни и те же грабли. Вот еще демка, в которой хакнуть не получилось, в итоге в фф все сломанное - codepen.io/suez/pen/WvaKpy А потом люди продолжают говорить что фф это хороший браузер для веб-разработчиков, что вызывает у меня больной смех.

Что касается вашей конкретной ситуации, то вам надо просто избегать нестинга элементов и разделять их по своим отдельным контейнерам с перспективой и так далее. То есть вам нет смысла держать 3 блока в 1 контейнере, просто сделайте 3 контейнера, задайте нужные z-index, а внутри каждого сделайте 3д-эффекта и они по идее не будут друг с другом пересекаться. Вообще с трансформами, z-index и сочетанием прочих свойств часто имеются проблемы, самый простой способ фиксинга это увеличение количества враппер-контейнеров. Лень вдаваться в детали, просто поверьте наслово, у меня большой опыт страданий в этой области :)

Comments

[Spisoktem]

Я пробовал по данному методу исправить(сейчас опять сделал по Вашему совету), т.е как вы говорите использовать для каждого блока отдельный родительский контейнер , но баг всеравно проявляет себя( Сразу когда открывается страница, расположение элементов не такое как надо, но когда они прокрутились то позиционируются нормально(но все равно это так не подходит так как в самом начале видно баг) и плюс к тому если навести на кнопку , то она прячется как и была изначально.
Да уж тут точно только страдать)

[Nikolay Talanov]

Spisoktem: Самое паршивое что с такими багами даже фоллбек не сделать. Все проверки на поддержку будут говорить что с браузером все ок... Только если детектить ФФ старыми способами через useragent и подсовывать версию без реального 3д. Ну или страдать пока не найдете решение...