6

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 !

gordie
  • 1,637
  • 3
  • 21
  • 41
  • so confused! why you used `transform: scale` on your container? – Pedram Feb 28 '16 at 11:25
  • This is a simplified example, but i need to use *transform:scale* on this page (to scale content and avoid scrollbars) – gordie Feb 28 '16 at 11:29
  • who told you that scaling elements prevents scrollbars? If you don't want scrollbars you can use percentage or viewport based layout (`%` or `vh`/`vw` units) or adding `overflow:hidden` to body – Aziz Feb 28 '16 at 11:47
  • 4
    Hi Aziz, thanks for your reply. I know that; but for my particular design I NEED to use transform-scale at that moment. My question is not how to avoid scrollbars, but how to have my z-indexes working with *transform:scale()* enabled... Thanks ! – gordie Feb 28 '16 at 11:55
  • Because a transform affect the block stacking order...this is known behavior as I recall. You may have to set the z-index manually...but @Aziz is right...you're solving the wrong problem. – Paulie_D Feb 28 '16 at 12:08
  • What do you mean about setting the z-index manually ? BTW, I need an horizontal scale, not only avoid scrollbars. That's why i'm using *scale*. – gordie Feb 28 '16 at 12:32
  • 1
    Any reason why you're scaling **#blocks-both** and not **#block-main** and **#block-sidebar** individually? – Cosmin Ababei Feb 28 '16 at 12:34
  • you know you could space out elements by applying margin or padding, instead of scale... – Aziz Feb 28 '16 at 12:40
  • @ Cosmin Ababei : no, no reason for that... – gordie Feb 28 '16 at 12:42
  • Cosmin Ababei : it works scaling both elements instead of #blocks-both ! – gordie Feb 28 '16 at 13:01

1 Answers1

6

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.

Community
  • 1
  • 1
Cosmin Ababei
  • 7,003
  • 2
  • 20
  • 34