transform:scale() breaking my z-index order

Question

I did setup an HTML page where I use z-index to set the elements "visual" order. It works as expected; but breaks when I use transform: scale().

#blocks-both{
    transform: scale(0.9);
}

I make a simplified example here : http://codepen.io/anon/pen/LNYrar

I read a lot of messages regarding this particular problem, but I can't find a solution to make my design work. I guess I don't understand something regarding this.

Could someone help ?

Thanks !

Answer 1

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.