CODEWITHSUNDEEP
htmlcsstransformz-index
gordie
gordie

Reputation: 1955

transform:scale() breaking my z-index order

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 !

Upvotes: 6

Views: 5778

Answers (1)

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

This is a known issue:

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.

Upvotes: 6

Related Questions