Moz-Transform Z-Index Bug

moz-transform z-index bug?

It isn't a bug, it's intentional: the default behaviour when you transform an element is to first flatten the transformed elements into a single layer.

The answer to your question lies in the CSS transform-style property, which overrides this default behaviour, and allows you to maintain the z-index ordering of individual elements nested within the element that is being transformed.

As described in the W3C documentation:

The ‘transform-style’ property defines how nested elements are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the X or Y axes will cause children positioned at positive or negative Z positions to appear on the element's plane, rather than in front of or behind it. If the ‘transform-style’ is ‘preserve-3d’, this flattening is not performed, so children maintain their position in 3D space.

So to fix your problem, you would theoretically need to add the following to your CSS code for #one: transform-style:preserve-3d;

Unfortunately, "theoretically" seems to be the name of the game here, because it seems that this feature isn't supported by Firefox yet. It apparently is supported by Safari (see this page which details it: http://www.webkit.org/blog/386/3d-transforms/), but my quick attempts to get it working within your fiddle haven't succeeded yet even in Safari.

[EDIT]

I can confirm that the current release of Firefox (v7) does not support transform-style or -moz-transform-style, and nor do the current Beta or Aurora releases.

Information is hard to find, but this bug report on Mozilla.org implies that they're working on it for Firefox version 10.

Given their current release cycle that isn't as far off as it sounds, but nevertheless it is still some time away before you'll be able to use this feature in Firefox. In the meanwhile, the only working solution I can give you is to separate the elements out rather than nesting them, and rotate them independantly.

Z-index bug when hover in Opera and Chrome

The z-index will not work correctly for position: static items, the elements index will simply follow the flow of the HTML.

Add position:relative to your .blog-box:hoverclass

.blog-box:hover{
    box-shadow: 5px 5px 10px  #000;
    -webkit-transform:  scale(1.1);
    -moz-transform:  scale(1.1);
    -ms-transform:  scale(1.1);
    transform: scale(1.1);
    z-index: 9999;
    position: relative;
}

EDIT: Probably best to add it to your .blog-box class instead.

webkit-transform and ignored z-index

Found the following:

By using rotateY we are adding a new dimension to our 2D classic output.
In this browser z-index don't work in 3D.

There is however a way to solve my issue:

.test1 {
  background-color:green;
  z-index: 30;
  -moz-transform: rotateY(0deg) scale(1.2);
  -webkit-transform: rotateY(0deg) scale(1.2) translate3d(0, 0, 50px);
  transform: rotateY(0deg) scale(1.2);
}

By applying translate3d to .test1 the green and the black block are no more on the same z plan.

test1 is on the z plan where z=50px ( without translate3d it was on z=0px )

test2 is an 'Oblique' plan somewhere bettween -50px<z<50px

Z-index displays differently in chrome and firefox

I think that a question from 6 years ago could help you. Take a look at "z-index behaviour is different in chrome to firefox". Does this help you?

3D Transform z-index broken with firefox, preserve-3d not preserved

Unfortunately, z-ordering is not working fine with cycled layers. It is a known problem that Firefox doesn't handle at all currently. That's an old Firefox bug and you can't fix it until they fix the bug in the browser.

transform:scale() breaking my z-index order

This is a known issue:

• css z-index lost after webkit transform translate3d
• webkit-transform breaks z-index on Safari
• webkit-transform overwrites z-index ordering in Chrome 13

You can read more about it here as it offers in depth explanation.

In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

You could avoid this issue by moving the transform properties from #blocks-both to #block-main and #block-sidebar like this:

#block-main, #block-sidebar {
  transform: scale(0.9);
}

#block-main {
  transform-origin: 100% 0;
}

#block-sidebar {
  transform-origin: 0 0;
}

I've also edited your example.

css z-index lost after webkit transform translate3d

This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824

Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.

---

Related Topics